[kbn/ui-shared-deps] split into two packages (#110558)

* [kbn/ui-shared-deps] split into two packages

* fix asset categorizer

* update snapshots

* reference npm dll from optimizer

Co-authored-by: spalger <spalger@users.noreply.github.com>

.buildkite/scripts/post_build_kibana.sh

@@ -6,7 +6,7 @@ if [[ ! "${DISABLE_CI_STATS_SHIPPING:-}" ]]; then
   echo "--- Ship Kibana Distribution Metrics to CI Stats"
   node scripts/ship_ci_stats \
     --metrics target/optimizer_bundle_metrics.json \
-    --metrics build/kibana/node_modules/@kbn/ui-shared-deps/shared_built_assets/metrics.json
+    --metrics build/kibana/node_modules/@kbn/ui-shared-deps-src/shared_built_assets/metrics.json
 fi
 
 echo "--- Upload Build Artifacts"

.eslintignore

@@ -34,7 +34,7 @@ snapshots.js
 /packages/kbn-test/src/functional_test_runner/__tests__/fixtures/
 /packages/kbn-test/src/functional_test_runner/lib/config/__tests__/fixtures/
 /packages/kbn-ui-framework/dist
-/packages/kbn-ui-shared-deps/src/flot_charts
+/packages/kbn-ui-shared-deps-src/src/flot_charts
 /packages/kbn-monaco/src/painless/antlr
 
 # Bazel

.eslintrc.js

@@ -1492,7 +1492,7 @@ module.exports = {
       },
     },
     {
-      files: ['packages/kbn-ui-shared-deps/src/flot_charts/**/*.js'],
+      files: ['packages/kbn-ui-shared-deps-src/src/flot_charts/**/*.js'],
       env: {
         jquery: true,
       },

.github/CODEOWNERS

@@ -198,7 +198,8 @@
 /packages/kbn-optimizer/ @elastic/kibana-operations
 /packages/kbn-pm/ @elastic/kibana-operations
 /packages/kbn-test/ @elastic/kibana-operations
-/packages/kbn-ui-shared-deps/ @elastic/kibana-operations
+/packages/kbn-ui-shared-deps-npm/ @elastic/kibana-operations
+/packages/kbn-ui-shared-deps-src/ @elastic/kibana-operations
 /packages/kbn-es-archiver/ @elastic/kibana-operations
 /packages/kbn-utils/ @elastic/kibana-operations
 /packages/kbn-cli-dev-mode/ @elastic/kibana-operations

.i18nrc.json

@@ -15,7 +15,7 @@
     "uiActionsExamples": "examples/ui_action_examples",
     "share": "src/plugins/share",
     "home": "src/plugins/home",
-    "flot": "packages/kbn-ui-shared-deps/src/flot_charts",
+    "flot": "packages/kbn-ui-shared-deps-src/src/flot_charts",
     "charts": "src/plugins/charts",
     "esUi": "src/plugins/es_ui_shared",
     "devTools": "src/plugins/dev_tools",

dev_docs/key_concepts/performance.mdx

@@ -66,9 +66,10 @@ longer necessary for us to include the `optimizer` in the
 distributable version of Kibana Every plugin artifact contains all
 plugin dependencies required to run the plugin, except some
 stateful dependencies shared across plugin bundles via 
-`@kbn/ui-shared-deps`. This means that plugin artifacts _tend to
-be larger_ than they were in the legacy platform. To understand the
-current size of your plugin artifact, run `@kbn/optimizer` with:
+`@kbn/ui-shared-deps-npm` and `@kbn/ui-shared-deps-src`. This means
+that plugin artifacts _tend to be larger_ than they were in the
+legacy platform. To understand the current size of your plugin
+artifact, run `@kbn/optimizer` with:
 
 ```bash
 node scripts/build_kibana_platform_plugins.js --dist --profile --focus=my_plugin

docs/developer/best-practices/performance.asciidoc

@@ -59,9 +59,10 @@ longer necessary for us to include the `optimizer` in the
 distributable version of {kib}. Every plugin artifact contains all
 plugin dependencies required to run the plugin, except some
 stateful dependencies shared across plugin bundles via 
-`@kbn/ui-shared-deps`. This means that plugin artifacts _tend to
-be larger_ than they were in the legacy platform. To understand the
-current size of your plugin artifact, run `@kbn/optimizer` with:
+`@kbn/ui-shared-deps-npm` and `@kbn/ui-shared-deps-src`. This means
+that plugin artifacts _tend to be larger_ than they were in the
+legacy platform. To understand the current size of your plugin
+artifact, run `@kbn/optimizer` with:
 
 [source,bash]
 ----

docs/developer/getting-started/monorepo-packages.asciidoc

@@ -103,6 +103,7 @@ yarn kbn watch
 - @kbn/test-subj-selector
 - @kbn/tinymath
 - @kbn/ui-framework
-- @kbn/ui-shared-deps
+- @kbn/ui-shared-deps-npm
+- @kbn/ui-shared-deps-src
 - @kbn/utility-types
 - @kbn/utils

package.json

@@ -158,7 +158,8 @@
     "@kbn/tinymath": "link:bazel-bin/packages/kbn-tinymath",
     "@kbn/typed-react-router-config": "link:bazel-bin/packages/kbn-typed-react-router-config",
     "@kbn/ui-framework": "link:bazel-bin/packages/kbn-ui-framework",
-    "@kbn/ui-shared-deps": "link:bazel-bin/packages/kbn-ui-shared-deps",
+    "@kbn/ui-shared-deps-npm": "link:bazel-bin/packages/kbn-ui-shared-deps-npm",
+    "@kbn/ui-shared-deps-src": "link:bazel-bin/packages/kbn-ui-shared-deps-src",
     "@kbn/utility-types": "link:bazel-bin/packages/kbn-utility-types",
     "@kbn/utils": "link:bazel-bin/packages/kbn-utils",
     "@loaders.gl/core": "^2.3.1",

packages/BUILD.bazel

@@ -62,7 +62,8 @@ filegroup(
       "//packages/kbn-tinymath:build",
       "//packages/kbn-typed-react-router-config:build",
       "//packages/kbn-ui-framework:build",
-      "//packages/kbn-ui-shared-deps:build",
+      "//packages/kbn-ui-shared-deps-npm:build",
+      "//packages/kbn-ui-shared-deps-src:build",
       "//packages/kbn-utility-types:build",
       "//packages/kbn-utils:build",
   ],

packages/kbn-babel-preset/styled_components_files.js

@@ -12,7 +12,7 @@ module.exports = {
    * Used by `kbn-babel-preset` and `elastic-eslint-config-kibana`.
    */
   USES_STYLED_COMPONENTS: [
-    /packages[\/\\]kbn-ui-shared-deps[\/\\]/,
+    /packages[\/\\]kbn-ui-shared-deps-(npm|src)[\/\\]/,
     /src[\/\\]plugins[\/\\](data|kibana_react)[\/\\]/,
     /x-pack[\/\\]plugins[\/\\](apm|beats_management|cases|fleet|infra|lists|observability|osquery|security_solution|timelines|uptime)[\/\\]/,
     /x-pack[\/\\]test[\/\\]plugin_functional[\/\\]plugins[\/\\]resolver_test[\/\\]/,

packages/kbn-monaco/README.md

@@ -1,5 +1,5 @@
 # @kbn/monaco
 
-A customized version of monaco that is automatically configured the way we want it to be when imported as `@kbn/monaco`. Additionally, imports to this package are automatically shared with all plugins using `@kbn/ui-shared-deps`.
+A customized version of monaco that is automatically configured the way we want it to be when imported as `@kbn/monaco`. Additionally, imports to this package are automatically shared with all plugins using `@kbn/ui-shared-deps-npm` and `@kbn/ui-shared-deps-src`.
 
 Includes custom xjson language support. The `es_ui_shared` plugin has an example of how to use it, in the future we will likely expose helpers from this package to make using it everywhere a little more seamless.

packages/kbn-optimizer/BUILD.bazel

@@ -34,7 +34,8 @@ RUNTIME_DEPS = [
   "//packages/kbn-config",
   "//packages/kbn-dev-utils",
   "//packages/kbn-std",
-  "//packages/kbn-ui-shared-deps",
+  "//packages/kbn-ui-shared-deps-npm",
+  "//packages/kbn-ui-shared-deps-src",
   "//packages/kbn-utils",
   "@npm//chalk",
   "@npm//clean-webpack-plugin",
@@ -63,7 +64,8 @@ TYPES_DEPS = [
   "//packages/kbn-config",
   "//packages/kbn-dev-utils",
   "//packages/kbn-std",
-  "//packages/kbn-ui-shared-deps",
+  "//packages/kbn-ui-shared-deps-npm",
+  "//packages/kbn-ui-shared-deps-src",
   "//packages/kbn-utils",
   "@npm//chalk",
   "@npm//clean-webpack-plugin",

packages/kbn-optimizer/src/integration_tests/basic_optimization.test.ts

@@ -132,7 +132,7 @@ it('builds expected bundles, saves bundle counts to metadata', async () => {
   expect(foo.cache.getModuleCount()).toBe(6);
   expect(foo.cache.getReferencedFiles()).toMatchInlineSnapshot(`
     Array [
-      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/bazel-out/<platform>-fastbuild/bin/packages/kbn-ui-shared-deps/target_node/public_path_module_creator.js,
+      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/bazel-out/<platform>-fastbuild/bin/packages/kbn-ui-shared-deps-npm/target_node/public_path_module_creator.js,
       <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/foo/kibana.json,
       <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/foo/public/async_import.ts,
       <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/foo/public/ext.ts,
@@ -155,7 +155,7 @@ it('builds expected bundles, saves bundle counts to metadata', async () => {
       <absolute path>/node_modules/@kbn/optimizer/postcss.config.js,
       <absolute path>/node_modules/css-loader/package.json,
       <absolute path>/node_modules/style-loader/package.json,
-      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/bazel-out/<platform>-fastbuild/bin/packages/kbn-ui-shared-deps/target_node/public_path_module_creator.js,
+      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/bazel-out/<platform>-fastbuild/bin/packages/kbn-ui-shared-deps-npm/target_node/public_path_module_creator.js,
       <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/bar/kibana.json,
       <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/bar/public/index.scss,
       <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/bar/public/index.ts,
@@ -175,7 +175,7 @@ it('builds expected bundles, saves bundle counts to metadata', async () => {
 
   expect(baz.cache.getReferencedFiles()).toMatchInlineSnapshot(`
     Array [
-      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/bazel-out/<platform>-fastbuild/bin/packages/kbn-ui-shared-deps/target_node/public_path_module_creator.js,
+      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/bazel-out/<platform>-fastbuild/bin/packages/kbn-ui-shared-deps-npm/target_node/public_path_module_creator.js,
       <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/x-pack/baz/kibana.json,
       <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/x-pack/baz/public/index.ts,
       <absolute path>/packages/kbn-optimizer/src/worker/entry_point_creator.ts,

packages/kbn-optimizer/src/worker/populate_bundle_cache_plugin.ts

@@ -19,6 +19,7 @@ import {
   isNormalModule,
   isIgnoredModule,
   isConcatenatedModule,
+  isDelegatedModule,
   getModulePath,
 } from './webpack_helpers';
 
@@ -118,7 +119,7 @@ export class PopulateBundleCachePlugin {
             continue;
           }
 
-          if (isExternalModule(module) || isIgnoredModule(module)) {
+          if (isExternalModule(module) || isIgnoredModule(module) || isDelegatedModule(module)) {
             continue;
           }
 

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

@@ -15,7 +15,8 @@ import TerserPlugin from 'terser-webpack-plugin';
 import webpackMerge from 'webpack-merge';
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import CompressionPlugin from 'compression-webpack-plugin';
-import * as UiSharedDeps from '@kbn/ui-shared-deps';
+import UiSharedDepsNpm from '@kbn/ui-shared-deps-npm';
+import UiSharedDepsSrc from '@kbn/ui-shared-deps-src';
 
 import { Bundle, BundleRefs, WorkerConfig } from '../common';
 import { BundleRefsPlugin } from './bundle_refs_plugin';
@@ -65,7 +66,7 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
       },
     },
 
-    externals: [UiSharedDeps.externals],
+    externals: [UiSharedDepsSrc.externals],
 
     plugins: [
       new CleanWebpackPlugin(),
@@ -90,7 +91,7 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
           include: [ENTRY_CREATOR],
           use: [
             {
-              loader: UiSharedDeps.publicPathLoader,
+              loader: UiSharedDepsNpm.publicPathLoader,
               options: {
                 key: bundle.id,
               },
@@ -260,6 +261,10 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
         test: /\.(js|css)$/,
         cache: false,
       }),
+      new webpack.DllReferencePlugin({
+        context: worker.repoRoot,
+        manifest: require(UiSharedDepsNpm.dllManifestPath),
+      }),
     ],
 
     optimization: {

packages/kbn-optimizer/src/worker/webpack_helpers.ts

@@ -151,6 +151,17 @@ export function isConcatenatedModule(module: any): module is WebpackConcatenated
   return module?.constructor?.name === 'ConcatenatedModule';
 }
 
+/** module replacing imports for DLL referenced */
+export interface WebpackDelegatedModule {
+  type: string;
+  id: number;
+  dependencies: unknown[];
+}
+
+export function isDelegatedModule(module: any): module is WebpackDelegatedModule {
+  return module?.constructor?.name === 'DelegatedModule';
+}
+
 export function getModulePath(module: WebpackNormalModule) {
   const queryIndex = module.resource.indexOf('?');
   return queryIndex === -1 ? module.resource : module.resource.slice(0, queryIndex);

packages/kbn-storybook/BUILD.bazel

@@ -30,7 +30,8 @@ NPM_MODULE_EXTRA_FILES = [
 
 RUNTIME_DEPS = [
   "//packages/kbn-dev-utils",
-  "//packages/kbn-ui-shared-deps",
+  "//packages/kbn-ui-shared-deps-npm",
+  "//packages/kbn-ui-shared-deps-src",
   "@npm//@storybook/addons",
   "@npm//@storybook/api",
   "@npm//@storybook/components",
@@ -46,7 +47,8 @@ RUNTIME_DEPS = [
 
 TYPES_DEPS = [
   "//packages/kbn-dev-utils",
-  "//packages/kbn-ui-shared-deps",
+  "//packages/kbn-ui-shared-deps-npm",
+  "//packages/kbn-ui-shared-deps-src",
   "@npm//@storybook/addons",
   "@npm//@storybook/api",
   "@npm//@storybook/components",

packages/kbn-storybook/src/lib/register_theme_switcher_addon.ts

@@ -22,7 +22,7 @@ export function registerThemeSwitcherAddon() {
       ) as HTMLLinkElement | null;
 
       if (stylesheet) {
-        stylesheet.href = `kbn-ui-shared-deps.${globals.euiTheme}.css`;
+        stylesheet.href = `kbn-ui-shared-deps-npm.${globals.euiTheme}.css`;
       }
     });
 

packages/kbn-storybook/src/lib/run_storybook_cli.ts

@@ -10,7 +10,8 @@ import { join } from 'path';
 import { logger } from '@storybook/node-logger';
 import buildStandalone from '@storybook/react/standalone';
 import { Flags, run } from '@kbn/dev-utils';
-import { distDir } from '@kbn/ui-shared-deps';
+import UiSharedDepsNpm from '@kbn/ui-shared-deps-npm';
+import UiSharedDepsSrc from '@kbn/ui-shared-deps-src';
 import * as constants from './constants';
 
 // Convert the flags to a Storybook loglevel
@@ -35,7 +36,7 @@ export function runStorybookCli({ configDir, name }: { configDir: string; name:
     async ({ flags, log }) => {
       log.debug('Global config:\n', constants);
 
-      const staticDir = [distDir];
+      const staticDir = [UiSharedDepsNpm.distDir, UiSharedDepsSrc.distDir];
       const config: Record<string, any> = {
         configDir,
         mode: flags.site ? 'static' : 'dev',

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

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { externals } from '@kbn/ui-shared-deps';
+import { externals } from '@kbn/ui-shared-deps-src';
 import { stringifyRequest } from 'loader-utils';
 import { resolve } from 'path';
 import { Configuration, Stats } from 'webpack';

packages/kbn-storybook/templates/index.ejs

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <!-- This is a copy of the
      [Storybook IFrame template](https://github.com/storybookjs/storybook/blob/7874ca357c6cb54f3f258dc61f6becae6783fba6/lib/core/src/server/templates/index.ejs).
-     We use this one instead because we want to add the @kbn/ui-shared-deps tags here.
+     We use this one instead because we want to add the @kbn/ui-shared-deps-* tags here.
   -->
 <html lang="en">
   <head>
@@ -16,12 +16,13 @@
 
     <!-- Added for Kibana shared dependencies -->
     <script>
-      window.__kbnPublicPath__ = { 'kbn-ui-shared-deps': '.' };
+      window.__kbnPublicPath__ = { 'kbn-ui-shared-deps-npm': '.', 'kbn-ui-shared-deps-src': '.' };
     </script>
-    <script src="kbn-ui-shared-deps.@elastic.js"></script>
-    <script src="kbn-ui-shared-deps.js"></script>
-    <link href="kbn-ui-shared-deps.css" rel="stylesheet" />
-    <link id="eui-theme-css" href="kbn-ui-shared-deps.v8.light.css" rel="stylesheet" />
+    <script src="kbn-ui-shared-deps-npm.@elastic.js"></script>
+    <script src="kbn-ui-shared-deps-npm.js"></script>
+    <script src="kbn-ui-shared-deps-src.js"></script>
+    <link href="kbn-ui-shared-deps-npm.css" rel="stylesheet" />
+    <link id="eui-theme-css" href="kbn-ui-shared-deps-npm.v8.light.css" rel="stylesheet" />
     <!--                                      -->
 
     <% if (typeof headHtmlSnippet !== 'undefined') { %> <%= headHtmlSnippet %> <% } %> <%

packages/kbn-ui-shared-deps-npm/BUILD.bazel

@@ -3,8 +3,8 @@ load("@build_bazel_rules_nodejs//:index.bzl", "js_library", "pkg_npm")
 load("@npm//webpack-cli:index.bzl", webpack = "webpack_cli")
 load("//src/dev/bazel:index.bzl", "jsts_transpiler")
 
-PKG_BASE_NAME = "kbn-ui-shared-deps"
-PKG_REQUIRE_NAME = "@kbn/ui-shared-deps"
+PKG_BASE_NAME = "kbn-ui-shared-deps-npm"
+PKG_REQUIRE_NAME = "@kbn/ui-shared-deps-npm"
 
 SOURCE_FILES = glob(
   [
@@ -23,20 +23,13 @@ filegroup(
 )
 
 NPM_MODULE_EXTRA_FILES = [
-  "flot_charts/package.json",
-  "theme/package.json",
+  "eui_theme_vars/package.json",
   "package.json",
   "README.md"
 ]
 
 RUNTIME_DEPS = [
   "//packages/elastic-datemath",
-  "//packages/elastic-safer-lodash-set",
-  "//packages/kbn-analytics",
-  "//packages/kbn-babel-preset",
-  "//packages/kbn-i18n",
-  "//packages/kbn-monaco",
-  "//packages/kbn-std",
   "//packages/kbn-utils",
   "@npm//@elastic/charts",
   "@npm//@elastic/eui",
@@ -45,6 +38,7 @@ RUNTIME_DEPS = [
   "@npm//abortcontroller-polyfill",
   "@npm//angular",
   "@npm//babel-loader",
+  "@npm//babel-plugin-transform-react-remove-prop-types",
   "@npm//core-js",
   "@npm//css-loader",
   "@npm//fflate",
@@ -71,14 +65,12 @@ RUNTIME_DEPS = [
   "@npm//whatwg-fetch"
 ]
 
+WEBPACK_DEPS = [
+  "@npm//clean-webpack-plugin",
+]
+
 TYPES_DEPS = [
   "//packages/elastic-datemath",
-  "//packages/elastic-safer-lodash-set",
-  "//packages/kbn-analytics",
-  "//packages/kbn-babel-preset",
-  "//packages/kbn-i18n",
-  "//packages/kbn-monaco",
-  "//packages/kbn-std",
   "//packages/kbn-utils",
   "@npm//@elastic/charts",
   "@npm//@elastic/eui",
@@ -146,7 +138,7 @@ ts_project(
 
 webpack(
   name = "shared_built_assets",
-  data = RUNTIME_DEPS + [
+  data = RUNTIME_DEPS + WEBPACK_DEPS + [
     "//:package.json",
     ":srcs",
     ":tsconfig",

packages/kbn-ui-shared-deps-npm/README.md

@@ -0,0 +1,3 @@
+# `@kbn/ui-shared-deps-npm`
+
+Shared dependencies that must only have a single instance and also come from NPM are installed and re-exported from here. To consume them, import the package and merge the `externals` export into your webpack config so that all references to the supported modules will be remapped to use the global versions.

packages/kbn-ui-shared-deps-npm/eui_theme_vars/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "../target_node/eui_theme_vars.js",
+  "types": "../target_types/eui_theme_vars.d.ts"
+}

packages/kbn-ui-shared-deps-npm/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@kbn/ui-shared-deps-npm",
+  "version": "1.0.0",
+  "private": true,
+  "license": "SSPL-1.0 OR Elastic License 2.0",
+  "main": "target_node/index.js",
+  "browser": "target_node/entry.js",
+  "types": "target_types/index.d.ts"
+}

packages/kbn-ui-shared-deps-npm/src/index.js

@@ -0,0 +1,49 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+const Path = require('path');
+
+/**
+ * Absolute path to the distributable directory
+ */
+exports.distDir = Path.resolve(__dirname, '../shared_built_assets');
+
+/**
+ * Path to dll manifest of modules included in this bundle
+ */
+exports.dllManifestPath = Path.resolve(exports.distDir, 'kbn-ui-shared-deps-npm-manifest.json');
+
+/**
+ * Filename of the main bundle file in the distributable directory
+ */
+exports.dllFilename = 'kbn-ui-shared-deps-npm.dll.js';
+
+/**
+ * Filename of the light-theme css file in the distributable directory
+ */
+exports.lightCssDistFilename = 'kbn-ui-shared-deps-npm.v7.light.css';
+
+/**
+ * Filename of the light-theme css file in the distributable directory
+ */
+exports.lightV8CssDistFilename = 'kbn-ui-shared-deps-npm.v8.light.css';
+
+/**
+ * Filename of the dark-theme css file in the distributable directory
+ */
+exports.darkCssDistFilename = 'kbn-ui-shared-deps-npm.v7.dark.css';
+
+/**
+ * Filename of the dark-theme css file in the distributable directory
+ */
+exports.darkV8CssDistFilename = 'kbn-ui-shared-deps-npm.v8.dark.css';
+
+/**
+ * Webpack loader for configuring the public path lookup from `window.__kbnPublicPath__`.
+ */
+exports.publicPathLoader = require.resolve('./public_path_loader');

packages/kbn-ui-shared-deps-npm/src/public_path_loader.js

@@ -16,5 +16,5 @@ module.exports = function (source) {
   const options = this.query;
   const valOpts = Qs.stringify({ key: options.key });
   const req = `${VAL_LOADER}?${valOpts}!${MODULE_CREATOR}`;
-  return `import ${stringifyRequest(this, req)};${source}`;
+  return `require(${stringifyRequest(this, req)});${source}`;
 };

packages/kbn-ui-shared-deps-npm/tsconfig.json

@@ -8,7 +8,7 @@
     "outDir": "./target_types",
     "rootDir": "src",
     "sourceMap": true,
-    "sourceRoot": "../../../../packages/kbn-ui-shared-deps/src",
+    "sourceRoot": "../../../../packages/kbn-ui-shared-deps-npm/src",
     "types": [
       "node",
       "resize-observer-polyfill"

packages/kbn-ui-shared-deps-npm/webpack.config.js

@@ -0,0 +1,175 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+const Path = require('path');
+const webpack = require('webpack');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const { REPO_ROOT } = require('@kbn/utils');
+
+const UiSharedDepsNpm = require('./src/index');
+
+const MOMENT_SRC = require.resolve('moment/min/moment-with-locales.js');
+const WEBPACK_SRC = require.resolve('webpack');
+
+module.exports = (_, argv) => {
+  const outputPath = argv.outputPath ? Path.resolve(argv.outputPath) : UiSharedDepsNpm.distDir;
+
+  return {
+    node: {
+      child_process: 'empty',
+      fs: 'empty',
+    },
+    externals: {
+      module: 'module',
+    },
+    mode: 'production',
+    entry: {
+      'kbn-ui-shared-deps-npm': [
+        // polyfill code
+        'core-js/stable',
+        'regenerator-runtime/runtime',
+        'whatwg-fetch',
+        'symbol-observable',
+
+        // modules from npm
+        '@elastic/charts',
+        '@elastic/datemath',
+        '@elastic/eui',
+        '@elastic/eui/dist/eui_charts_theme',
+        '@elastic/eui/lib/services',
+        '@elastic/eui/lib/services/format',
+        '@elastic/eui/dist/eui_theme_light.json',
+        '@elastic/eui/dist/eui_theme_dark.json',
+        '@elastic/eui/dist/eui_theme_amsterdam_light.json',
+        '@elastic/eui/dist/eui_theme_amsterdam_dark.json',
+        '@elastic/numeral',
+        '@emotion/react',
+        'angular',
+        'classnames',
+        'fflate',
+        'history',
+        'jquery',
+        'lodash',
+        'lodash/fp',
+        'moment-timezone/moment-timezone',
+        'moment-timezone/data/packed/latest.json',
+        'moment',
+        'react-beautiful-dnd',
+        'react-dom',
+        'react-dom/server',
+        'react-router-dom',
+        'react-router',
+        'react',
+        'rison-node',
+        'rxjs',
+        'rxjs/operators',
+        'styled-components',
+        'tslib',
+      ],
+      'kbn-ui-shared-deps-npm.v7.dark': ['@elastic/eui/dist/eui_theme_dark.css'],
+      'kbn-ui-shared-deps-npm.v7.light': ['@elastic/eui/dist/eui_theme_light.css'],
+      'kbn-ui-shared-deps-npm.v8.dark': ['@elastic/eui/dist/eui_theme_amsterdam_dark.css'],
+      'kbn-ui-shared-deps-npm.v8.light': ['@elastic/eui/dist/eui_theme_amsterdam_light.css'],
+    },
+    context: __dirname,
+    devtool: 'cheap-source-map',
+    output: {
+      path: outputPath,
+      filename: '[name].dll.js',
+      chunkFilename: 'kbn-ui-shared-deps-npm.chunk.[id].js',
+      devtoolModuleFilenameTemplate: (info) =>
+        `kbn-ui-shared-deps-npm/${Path.relative(REPO_ROOT, info.absoluteResourcePath)}`,
+      library: '__kbnSharedDeps_npm__',
+      futureEmitAssets: true,
+    },
+
+    module: {
+      noParse: [MOMENT_SRC, WEBPACK_SRC],
+      rules: [
+        {
+          include: [require.resolve('jquery')],
+          use: [
+            {
+              loader: UiSharedDepsNpm.publicPathLoader,
+              options: {
+                key: 'kbn-ui-shared-deps-npm',
+              },
+            },
+          ],
+        },
+        {
+          test: /\.css$/,
+          use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        },
+        {
+          test: /[\\\/]@elastic[\\\/]eui[\\\/].*\.js$/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {
+                plugins: [
+                  [
+                    require.resolve('babel-plugin-transform-react-remove-prop-types'),
+                    {
+                      mode: 'remove',
+                      removeImport: true,
+                    },
+                  ],
+                ],
+              },
+            },
+          ],
+        },
+      ],
+    },
+
+    resolve: {
+      alias: {
+        moment: MOMENT_SRC,
+        // NOTE: Used to include react profiling on bundles
+        // https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977#webpack-4
+        'react-dom$': 'react-dom/profiling',
+        'scheduler/tracing': 'scheduler/tracing-profiling',
+      },
+      extensions: ['.js', '.ts'],
+      symlinks: false,
+    },
+
+    optimization: {
+      minimize: false,
+      noEmitOnErrors: true,
+    },
+
+    performance: {
+      // NOTE: we are disabling this as those hints
+      // are more tailored for the final bundles result
+      // and not for the webpack compilations performance itself
+      hints: false,
+    },
+
+    plugins: [
+      new CleanWebpackPlugin({
+        protectWebpackAssets: false,
+        cleanAfterEveryBuildPatterns: [
+          'kbn-ui-shared-deps-npm.{v7,v8}.{dark,light}.{dll.js,dll.js.map}',
+          'kbn-ui-shared-deps-npm.{v7,v8}.{dark,light}-manifest.json',
+        ],
+      }),
+      new MiniCssExtractPlugin({
+        filename: '[name].css',
+      }),
+      new webpack.DllPlugin({
+        context: REPO_ROOT,
+        path: Path.resolve(outputPath, '[name]-manifest.json'),
+        name: '__kbnSharedDeps_npm__',
+      }),
+    ],
+  };
+};

packages/kbn-ui-shared-deps-src/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@kbn/babel-preset/node_preset"]
+}

packages/kbn-ui-shared-deps-src/BUILD.bazel

@@ -0,0 +1,128 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_config", "ts_project")
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library", "pkg_npm")
+load("@npm//webpack-cli:index.bzl", webpack = "webpack_cli")
+load("//src/dev/bazel:index.bzl", "jsts_transpiler")
+
+PKG_BASE_NAME = "kbn-ui-shared-deps-src"
+PKG_REQUIRE_NAME = "@kbn/ui-shared-deps-src"
+
+SOURCE_FILES = glob(
+  [
+    "src/**/*",
+  ],
+  exclude = [
+    "**/*.md",
+  ],
+)
+
+SRCS = SOURCE_FILES
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "flot_charts/package.json",
+  "theme/package.json",
+  "package.json",
+  "README.md"
+]
+
+RUNTIME_DEPS = [
+  "//packages/elastic-datemath",
+  "//packages/elastic-safer-lodash-set",
+  "//packages/kbn-analytics",
+  "//packages/kbn-babel-preset",
+  "//packages/kbn-i18n",
+  "//packages/kbn-monaco",
+  "//packages/kbn-std",
+  "//packages/kbn-ui-shared-deps-npm",
+  "//packages/kbn-utils",
+]
+
+TYPES_DEPS = [
+  "//packages/elastic-datemath",
+  "//packages/elastic-safer-lodash-set",
+  "//packages/kbn-analytics",
+  "//packages/kbn-babel-preset",
+  "//packages/kbn-i18n",
+  "//packages/kbn-monaco",
+  "//packages/kbn-std",
+  "//packages/kbn-ui-shared-deps-npm",
+  "//packages/kbn-utils",
+  "@npm//@elastic/eui",
+  "@npm//resize-observer-polyfill",
+  "@npm//webpack",
+]
+
+jsts_transpiler(
+  name = "target_node",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+)
+
+ts_config(
+  name = "tsconfig",
+  src = "tsconfig.json",
+  deps = [
+    "//:tsconfig.base.json",
+    "//:tsconfig.bazel.json",
+  ],
+)
+
+ts_project(
+  name = "tsc_types",
+  args = ['--pretty'],
+  srcs = SRCS,
+  deps = TYPES_DEPS,
+  allow_js = True,
+  declaration = True,
+  declaration_map = True,
+  emit_declaration_only = True,
+  out_dir = "target_types",
+  root_dir = "src",
+  source_map = True,
+  tsconfig = ":tsconfig",
+)
+
+webpack(
+  name = "shared_built_assets",
+  data = RUNTIME_DEPS + [
+    "//:package.json",
+    ":srcs",
+    ":tsconfig",
+    ":webpack.config.js",
+  ],
+  output_dir = True,
+  args = [
+    "--config",
+    "$(location webpack.config.js)",
+    "--output-path",
+    "$(@D)",
+    "--display=minimal"
+  ],
+)
+
+js_library(
+  name = PKG_BASE_NAME,
+  srcs = NPM_MODULE_EXTRA_FILES,
+  deps = RUNTIME_DEPS + [":target_node", ":tsc_types", ":shared_built_assets"],
+  package_name = PKG_REQUIRE_NAME,
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm(
+  name = "npm_module",
+  deps = [
+    ":%s" % PKG_BASE_NAME,
+  ]
+)
+
+filegroup(
+  name = "build",
+  srcs = [
+    ":npm_module",
+  ],
+  visibility = ["//visibility:public"],
+)

packages/kbn-ui-shared-deps-src/README.md

@@ -0,0 +1,3 @@
+# `@kbn/ui-shared-deps-src`
+
+Shared dependencies that must only have a single instance and are built from the repository are installed and re-exported from here. To consume them, import the package and merge the `externals` export into your webpack config so that all references to the supported modules will be remapped to use the global versions.

packages/kbn-ui-shared-deps-src/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@kbn/ui-shared-deps",
+  "name": "@kbn/ui-shared-deps-src",
   "version": "1.0.0",
   "private": true,
   "license": "SSPL-1.0 OR Elastic License 2.0",

packages/kbn-ui-shared-deps-src/src/entry.js

@@ -8,9 +8,9 @@
 
 require('./polyfills');
 
-// must load before angular
 export const Jquery = require('jquery');
 window.$ = window.jQuery = Jquery;
+// mutates window.jQuery and window.$
 require('./flot_charts');
 
 // stateful deps
@@ -26,7 +26,8 @@ export const MonacoBarePluginApi = require('@kbn/monaco').BarePluginApi;
 export const React = require('react');
 export const ReactDom = require('react-dom');
 export const ReactDomServer = require('react-dom/server');
-export const ReactRouter = require('react-router'); // eslint-disable-line
+// eslint-disable-next-line @kbn/eslint/module_migration
+export const ReactRouter = require('react-router');
 export const ReactRouterDom = require('react-router-dom');
 export const StyledComponents = require('styled-components');
 
@@ -41,12 +42,14 @@ export const ElasticEui = require('@elastic/eui');
 export const ElasticEuiLibServices = require('@elastic/eui/lib/services');
 export const ElasticEuiLibServicesFormat = require('@elastic/eui/lib/services/format');
 export const ElasticEuiChartsTheme = require('@elastic/eui/dist/eui_charts_theme');
+export const ElasticDatemath = require('@elastic/datemath');
 export const ReactBeautifulDnD = require('react-beautiful-dnd');
+
 export const Theme = require('./theme.ts');
 export const Lodash = require('lodash');
 export const LodashFp = require('lodash/fp');
 
-import { unzlibSync, strFromU8 } from 'fflate';
+const { unzlibSync, strFromU8 } = require('fflate');
 export const Fflate = { unzlibSync, strFromU8 };
 
 // runtime deps which don't need to be copied across all bundles

packages/kbn-ui-shared-deps-src/src/index.js

@@ -11,48 +11,25 @@ const Path = require('path');
 /**
  * Absolute path to the distributable directory
  */
-exports.distDir = Path.resolve(__dirname, '..', 'shared_built_assets');
-
-/**
- * Filename of files that must be loaded before the jsFilename
- */
-exports.jsDepFilenames = ['kbn-ui-shared-deps.@elastic.js'];
+exports.distDir = Path.resolve(__dirname, '../shared_built_assets');
 
 /**
  * Filename of the main bundle file in the distributable directory
  */
-exports.jsFilename = 'kbn-ui-shared-deps.js';
+exports.jsFilename = 'kbn-ui-shared-deps-src.js';
 
 /**
- * Filename of the unthemed css file in the distributable directory
+ * Filename of the main bundle file in the distributable directory
  */
-exports.baseCssDistFilename = 'kbn-ui-shared-deps.css';
-
-/**
- * Filename of the light-theme css file in the distributable directory
- */
-exports.lightCssDistFilename = 'kbn-ui-shared-deps.v7.light.css';
-
-/**
- * Filename of the light-theme css file in the distributable directory
- */
-exports.lightV8CssDistFilename = 'kbn-ui-shared-deps.v8.light.css';
-
-/**
- * Filename of the dark-theme css file in the distributable directory
- */
-exports.darkCssDistFilename = 'kbn-ui-shared-deps.v7.dark.css';
-
-/**
- * Filename of the dark-theme css file in the distributable directory
- */
-exports.darkV8CssDistFilename = 'kbn-ui-shared-deps.v8.dark.css';
+exports.cssDistFilename = 'kbn-ui-shared-deps-src.css';
 
 /**
  * Externals mapping inteded to be used in a webpack config
  */
 exports.externals = {
-  // stateful deps
+  /**
+   * stateful deps
+   */
   angular: '__kbnSharedDeps__.Angular',
   '@kbn/i18n': '__kbnSharedDeps__.KbnI18n',
   '@kbn/i18n/angular': '__kbnSharedDeps__.KbnI18nAngular',
@@ -68,7 +45,7 @@ exports.externals = {
   'react-router-dom': '__kbnSharedDeps__.ReactRouterDom',
   'styled-components': '__kbnSharedDeps__.StyledComponents',
   '@kbn/monaco': '__kbnSharedDeps__.KbnMonaco',
-  '@kbn/ui-shared-deps/theme': '__kbnSharedDeps__.Theme',
+  '@kbn/ui-shared-deps-src/theme': '__kbnSharedDeps__.Theme',
   // this is how plugins/consumers from npm load monaco
   'monaco-editor/esm/vs/editor/editor.api': '__kbnSharedDeps__.MonacoBarePluginApi',
 
@@ -103,8 +80,3 @@ exports.externals = {
   history: '__kbnSharedDeps__.History',
   classnames: '__kbnSharedDeps__.Classnames',
 };
-
-/**
- * Webpack loader for configuring the public path lookup from `window.__kbnPublicPath__`.
- */
-exports.publicPathLoader = require.resolve('./public_path_loader');

packages/kbn-ui-shared-deps-src/src/theme.ts

@@ -6,11 +6,14 @@
  * Side Public License, v 1.
  */
 
-import LightTheme from '@elastic/eui/dist/eui_theme_light.json';
+import { default as v7Light } from '@elastic/eui/dist/eui_theme_light.json';
+import { default as v7Dark } from '@elastic/eui/dist/eui_theme_dark.json';
+import { default as v8Light } from '@elastic/eui/dist/eui_theme_amsterdam_light.json';
+import { default as v8Dark } from '@elastic/eui/dist/eui_theme_amsterdam_dark.json';
 
 const globals: any = typeof window === 'undefined' ? {} : window;
 
-export type Theme = typeof LightTheme;
+export type Theme = typeof v7Light | typeof v8Light;
 
 // in the Kibana app we can rely on this global being defined, but in
 // some cases (like jest) the global is undefined
@@ -21,11 +24,11 @@ export const darkMode = tag.endsWith('dark');
 export let euiLightVars: Theme;
 export let euiDarkVars: Theme;
 if (version === 7) {
-  euiLightVars = require('@elastic/eui/dist/eui_theme_light.json');
-  euiDarkVars = require('@elastic/eui/dist/eui_theme_dark.json');
+  euiLightVars = v7Light;
+  euiDarkVars = v7Dark;
 } else {
-  euiLightVars = require('@elastic/eui/dist/eui_theme_amsterdam_light.json');
-  euiDarkVars = require('@elastic/eui/dist/eui_theme_amsterdam_dark.json');
+  euiLightVars = v8Light;
+  euiDarkVars = v8Dark;
 }
 
 /**

packages/kbn-ui-shared-deps-src/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.bazel.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./target_types",
+    "rootDir": "src",
+    "sourceMap": true,
+    "sourceRoot": "../../../../packages/kbn-ui-shared-deps-src/src",
+    "types": [
+      "node",
+      "resize-observer-polyfill"
+    ]
+  },
+  "include": [
+    "src/**/*",
+  ]
+}

packages/kbn-ui-shared-deps-src/webpack.config.js

@@ -7,14 +7,15 @@
  */
 
 const Path = require('path');
+
+const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
 const { REPO_ROOT } = require('@kbn/utils');
+const UiSharedDepsNpm = require('@kbn/ui-shared-deps-npm');
 
-const UiSharedDeps = require('./src/index');
+const UiSharedDepsSrc = require('./src');
 
 const MOMENT_SRC = require.resolve('moment/min/moment-with-locales.js');
-const WEBPACK_SRC = require.resolve('webpack');
 
 module.exports = {
   node: {
@@ -26,42 +27,34 @@ module.exports = {
   },
   mode: 'production',
   entry: {
-    'kbn-ui-shared-deps': './src/entry.js',
-    'kbn-ui-shared-deps.v7.dark': ['@elastic/eui/dist/eui_theme_dark.css'],
-    'kbn-ui-shared-deps.v7.light': ['@elastic/eui/dist/eui_theme_light.css'],
-    'kbn-ui-shared-deps.v8.dark': ['@elastic/eui/dist/eui_theme_amsterdam_dark.css'],
-    'kbn-ui-shared-deps.v8.light': ['@elastic/eui/dist/eui_theme_amsterdam_light.css'],
+    'kbn-ui-shared-deps-src': './src/entry.js',
   },
   context: __dirname,
   devtool: 'cheap-source-map',
   output: {
-    path: UiSharedDeps.distDir,
+    path: UiSharedDepsSrc.distDir,
     filename: '[name].js',
+    chunkFilename: 'kbn-ui-shared-deps-src.chunk.[id].js',
     sourceMapFilename: '[file].map',
     devtoolModuleFilenameTemplate: (info) =>
-      `kbn-ui-shared-deps/${Path.relative(REPO_ROOT, info.absoluteResourcePath)}`,
+      `kbn-ui-shared-deps-src/${Path.relative(REPO_ROOT, info.absoluteResourcePath)}`,
     library: '__kbnSharedDeps__',
     futureEmitAssets: true,
   },
 
   module: {
-    noParse: [MOMENT_SRC, WEBPACK_SRC],
     rules: [
       {
         include: [require.resolve('./src/entry.js')],
         use: [
           {
-            loader: UiSharedDeps.publicPathLoader,
+            loader: UiSharedDepsNpm.publicPathLoader,
             options: {
-              key: 'kbn-ui-shared-deps',
+              key: 'kbn-ui-shared-deps-src',
             },
           },
         ],
       },
-      {
-        test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
-      },
       {
         include: [require.resolve('./src/theme.ts')],
         use: [
@@ -74,23 +67,8 @@ module.exports = {
         ],
       },
       {
-        test: /[\\\/]@elastic[\\\/]eui[\\\/].*\.js$/,
-        use: [
-          {
-            loader: 'babel-loader',
-            options: {
-              plugins: [
-                [
-                  require.resolve('babel-plugin-transform-react-remove-prop-types'),
-                  {
-                    mode: 'remove',
-                    removeImport: true,
-                  },
-                ],
-              ],
-            },
-          },
-        ],
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
       },
       {
         test: /\.(ttf)(\?|$)/,
@@ -103,6 +81,8 @@ module.exports = {
   },
 
   resolve: {
+    extensions: ['.js', '.ts'],
+    symlinks: false,
     alias: {
       moment: MOMENT_SRC,
       // NOTE: Used to include react profiling on bundles
@@ -110,23 +90,11 @@ module.exports = {
       'react-dom$': 'react-dom/profiling',
       'scheduler/tracing': 'scheduler/tracing-profiling',
     },
-    extensions: ['.js', '.ts'],
-    symlinks: false,
   },
 
   optimization: {
     minimize: false,
     noEmitOnErrors: true,
-    splitChunks: {
-      cacheGroups: {
-        'kbn-ui-shared-deps.@elastic': {
-          name: 'kbn-ui-shared-deps.@elastic',
-          test: (m) => m.resource && m.resource.includes('@elastic'),
-          chunks: 'all',
-          enforce: true,
-        },
-      },
-    },
   },
 
   performance: {
@@ -140,5 +108,10 @@ module.exports = {
     new MiniCssExtractPlugin({
       filename: '[name].css',
     }),
+
+    new webpack.DllReferencePlugin({
+      context: REPO_ROOT,
+      manifest: require(UiSharedDepsNpm.dllManifestPath), // eslint-disable-line
+    }),
   ],
 };

packages/kbn-ui-shared-deps/README.md

@@ -1,3 +0,0 @@
-# `@kbn/ui-shared-deps`
-
-Shared dependencies that must only have a single instance are installed and re-exported from here. To consume them, import the package and merge the `externals` export into your webpack config so that all references to the supported modules will be remapped to use the global versions.

src/core/server/core_app/bundle_routes/register_bundle_routes.test.mocks.ts

@@ -11,6 +11,10 @@ jest.doMock('./bundles_route', () => ({
   registerRouteForBundle: registerRouteForBundleMock,
 }));
 
-jest.doMock('@kbn/ui-shared-deps', () => ({
-  distDir: 'uiSharedDepsDistDir',
+jest.doMock('@kbn/ui-shared-deps-src', () => ({
+  distDir: 'uiSharedDepsSrcDistDir',
+}));
+
+jest.doMock('@kbn/ui-shared-deps-npm', () => ({
+  distDir: 'uiSharedDepsNpmDistDir',
 }));

src/core/server/core_app/bundle_routes/register_bundle_routes.test.ts

@@ -56,14 +56,22 @@ describe('registerBundleRoutes', () => {
       uiPlugins: createUiPlugins(),
     });
 
-    expect(registerRouteForBundleMock).toHaveBeenCalledTimes(2);
+    expect(registerRouteForBundleMock).toHaveBeenCalledTimes(3);
 
     expect(registerRouteForBundleMock).toHaveBeenCalledWith(router, {
       fileHashCache: expect.any(FileHashCache),
       isDist: true,
-      bundlesPath: 'uiSharedDepsDistDir',
-      publicPath: '/server-base-path/42/bundles/kbn-ui-shared-deps/',
-      routePath: '/42/bundles/kbn-ui-shared-deps/',
+      bundlesPath: 'uiSharedDepsSrcDistDir',
+      publicPath: '/server-base-path/42/bundles/kbn-ui-shared-deps-src/',
+      routePath: '/42/bundles/kbn-ui-shared-deps-src/',
+    });
+
+    expect(registerRouteForBundleMock).toHaveBeenCalledWith(router, {
+      fileHashCache: expect.any(FileHashCache),
+      isDist: true,
+      bundlesPath: 'uiSharedDepsNpmDistDir',
+      publicPath: '/server-base-path/42/bundles/kbn-ui-shared-deps-npm/',
+      routePath: '/42/bundles/kbn-ui-shared-deps-npm/',
     });
 
     expect(registerRouteForBundleMock).toHaveBeenCalledWith(router, {
@@ -83,7 +91,7 @@ describe('registerBundleRoutes', () => {
       uiPlugins: createUiPlugins('plugin-a', 'plugin-b'),
     });
 
-    expect(registerRouteForBundleMock).toHaveBeenCalledTimes(4);
+    expect(registerRouteForBundleMock).toHaveBeenCalledTimes(5);
 
     expect(registerRouteForBundleMock).toHaveBeenCalledWith(router, {
       fileHashCache: expect.any(FileHashCache),

src/core/server/core_app/bundle_routes/register_bundle_routes.ts

@@ -9,7 +9,8 @@
 import { join } from 'path';
 import { PackageInfo } from '@kbn/config';
 import { fromRoot } from '@kbn/utils';
-import { distDir as uiSharedDepsDistDir } from '@kbn/ui-shared-deps';
+import UiSharedDepsNpm from '@kbn/ui-shared-deps-npm';
+import UiSharedDepsSrc from '@kbn/ui-shared-deps-src';
 import { IRouter } from '../../http';
 import { UiPlugins } from '../../plugins';
 import { FileHashCache } from './file_hash_cache';
@@ -43,9 +44,16 @@ export function registerBundleRoutes({
   const fileHashCache = new FileHashCache();
 
   registerRouteForBundle(router, {
-    publicPath: `${serverBasePath}/${buildNum}/bundles/kbn-ui-shared-deps/`,
-    routePath: `/${buildNum}/bundles/kbn-ui-shared-deps/`,
-    bundlesPath: uiSharedDepsDistDir,
+    publicPath: `${serverBasePath}/${buildNum}/bundles/kbn-ui-shared-deps-npm/`,
+    routePath: `/${buildNum}/bundles/kbn-ui-shared-deps-npm/`,
+    bundlesPath: UiSharedDepsNpm.distDir,
+    fileHashCache,
+    isDist,
+  });
+  registerRouteForBundle(router, {
+    publicPath: `${serverBasePath}/${buildNum}/bundles/kbn-ui-shared-deps-src/`,
+    routePath: `/${buildNum}/bundles/kbn-ui-shared-deps-src/`,
+    bundlesPath: UiSharedDepsSrc.distDir,
     fileHashCache,
     isDist,
   });

src/core/server/rendering/bootstrap/bootstrap_renderer.ts

@@ -78,7 +78,8 @@ export const bootstrapRendererFactory: BootstrapRendererFactory = ({
     // src/optimize/bundles_route/bundles_route.ts
     const publicPathMap = JSON.stringify({
       core: `${regularBundlePath}/core/`,
-      'kbn-ui-shared-deps': `${regularBundlePath}/kbn-ui-shared-deps/`,
+      'kbn-ui-shared-deps-src': `${regularBundlePath}/kbn-ui-shared-deps-src/`,
+      'kbn-ui-shared-deps-npm': `${regularBundlePath}/kbn-ui-shared-deps-npm/`,
       ...Object.fromEntries(
         [...bundlePaths.entries()].map(([pluginId, plugin]) => [pluginId, plugin.publicPath])
       ),

src/core/server/rendering/bootstrap/get_js_dependency_paths.test.ts

@@ -21,12 +21,14 @@ describe('getJsDependencyPaths', () => {
       publicPath: 'plugin2/public-path',
     });
 
-    expect(getJsDependencyPaths('/regular-bundle-path', bundlePaths)).toEqual([
-      '/regular-bundle-path/kbn-ui-shared-deps/kbn-ui-shared-deps.@elastic.js',
-      '/regular-bundle-path/kbn-ui-shared-deps/kbn-ui-shared-deps.js',
-      '/regular-bundle-path/core/core.entry.js',
-      'plugin1/bundle-path.js',
-      'plugin2/bundle-path.js',
-    ]);
+    expect(getJsDependencyPaths('/regular-bundle-path', bundlePaths)).toMatchInlineSnapshot(`
+      Array [
+        "/regular-bundle-path/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js",
+        "/regular-bundle-path/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.js",
+        "/regular-bundle-path/core/core.entry.js",
+        "plugin1/bundle-path.js",
+        "plugin2/bundle-path.js",
+      ]
+    `);
   });
 });

src/core/server/rendering/bootstrap/get_js_dependency_paths.ts

@@ -6,7 +6,8 @@
  * Side Public License, v 1.
  */
 
-import * as UiSharedDeps from '@kbn/ui-shared-deps';
+import UiSharedDepsNpm from '@kbn/ui-shared-deps-npm';
+import UiSharedDepsSrc from '@kbn/ui-shared-deps-src';
 import type { PluginInfo } from './get_plugin_bundle_paths';
 
 export const getJsDependencyPaths = (
@@ -14,10 +15,8 @@ export const getJsDependencyPaths = (
   bundlePaths: Map<string, PluginInfo>
 ) => {
   return [
-    ...UiSharedDeps.jsDepFilenames.map(
-      (filename) => `${regularBundlePath}/kbn-ui-shared-deps/${filename}`
-    ),
-    `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.jsFilename}`,
+    `${regularBundlePath}/kbn-ui-shared-deps-npm/${UiSharedDepsNpm.dllFilename}`,
+    `${regularBundlePath}/kbn-ui-shared-deps-src/${UiSharedDepsSrc.jsFilename}`,
     `${regularBundlePath}/core/core.entry.js`,
     ...[...bundlePaths.values()].map((plugin) => plugin.bundlePath),
   ];

src/core/server/rendering/bootstrap/get_theme_tag.ts

@@ -8,7 +8,7 @@
 
 /**
  * Computes the themeTag that will be used on the client-side as `__kbnThemeTag__`
- * @see `packages/kbn-ui-shared-deps/theme.ts`
+ * @see `packages/kbn-ui-shared-deps-src/theme.ts`
  */
 export const getThemeTag = ({
   themeVersion,

src/core/server/rendering/render_utils.test.ts

@@ -21,8 +21,8 @@ describe('getStylesheetPaths', () => {
           })
         ).toMatchInlineSnapshot(`
           Array [
-            "/base-path/9000/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.css",
-            "/base-path/9000/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.v7.dark.css",
+            "/base-path/9000/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v7.dark.css",
+            "/base-path/9000/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css",
             "/base-path/node_modules/@kbn/ui-framework/dist/kui_dark.css",
             "/base-path/ui/legacy_dark_theme.css",
           ]
@@ -40,8 +40,8 @@ describe('getStylesheetPaths', () => {
           })
         ).toMatchInlineSnapshot(`
           Array [
-            "/base-path/17/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.css",
-            "/base-path/17/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.v8.dark.css",
+            "/base-path/17/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.dark.css",
+            "/base-path/17/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css",
             "/base-path/node_modules/@kbn/ui-framework/dist/kui_dark.css",
             "/base-path/ui/legacy_dark_theme.css",
           ]
@@ -61,8 +61,8 @@ describe('getStylesheetPaths', () => {
           })
         ).toMatchInlineSnapshot(`
           Array [
-            "/base-path/42/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.css",
-            "/base-path/42/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.v7.light.css",
+            "/base-path/42/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v7.light.css",
+            "/base-path/42/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css",
             "/base-path/node_modules/@kbn/ui-framework/dist/kui_light.css",
             "/base-path/ui/legacy_light_theme.css",
           ]
@@ -80,8 +80,8 @@ describe('getStylesheetPaths', () => {
           })
         ).toMatchInlineSnapshot(`
           Array [
-            "/base-path/69/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.css",
-            "/base-path/69/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.v8.light.css",
+            "/base-path/69/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css",
+            "/base-path/69/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css",
             "/base-path/node_modules/@kbn/ui-framework/dist/kui_light.css",
             "/base-path/ui/legacy_light_theme.css",
           ]

src/core/server/rendering/render_utils.ts

@@ -6,7 +6,8 @@
  * Side Public License, v 1.
  */
 
-import * as UiSharedDeps from '@kbn/ui-shared-deps';
+import UiSharedDepsNpm from '@kbn/ui-shared-deps-npm';
+import UiSharedDepsSrc from '@kbn/ui-shared-deps-src';
 import { PublicUiSettingsParams, UserProvidedValues } from '../ui_settings';
 
 export const getSettingValue = <T>(
@@ -34,19 +35,20 @@ export const getStylesheetPaths = ({
 }) => {
   const regularBundlePath = `${basePath}/${buildNum}/bundles`;
   return [
-    `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.baseCssDistFilename}`,
     ...(darkMode
       ? [
           themeVersion === 'v7'
-            ? `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.darkCssDistFilename}`
-            : `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.darkV8CssDistFilename}`,
+            ? `${regularBundlePath}/kbn-ui-shared-deps-npm/${UiSharedDepsNpm.darkCssDistFilename}`
+            : `${regularBundlePath}/kbn-ui-shared-deps-npm/${UiSharedDepsNpm.darkV8CssDistFilename}`,
+          `${regularBundlePath}/kbn-ui-shared-deps-src/${UiSharedDepsSrc.cssDistFilename}`,
           `${basePath}/node_modules/@kbn/ui-framework/dist/kui_dark.css`,
           `${basePath}/ui/legacy_dark_theme.css`,
         ]
       : [
           themeVersion === 'v7'
-            ? `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.lightCssDistFilename}`
-            : `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.lightV8CssDistFilename}`,
+            ? `${regularBundlePath}/kbn-ui-shared-deps-npm/${UiSharedDepsNpm.lightCssDistFilename}`
+            : `${regularBundlePath}/kbn-ui-shared-deps-npm/${UiSharedDepsNpm.lightV8CssDistFilename}`,
+          `${regularBundlePath}/kbn-ui-shared-deps-src/${UiSharedDepsSrc.cssDistFilename}`,
           `${basePath}/node_modules/@kbn/ui-framework/dist/kui_light.css`,
           `${basePath}/ui/legacy_light_theme.css`,
         ]),

src/dev/build/tasks/generate_packages_optimized_assets.ts

@@ -6,10 +6,12 @@
  * Side Public License, v 1.
  */
 
+import Path from 'path';
+
 import { pipeline } from 'stream';
 import { promisify } from 'util';
-
 import fs from 'fs';
+
 import gulpBrotli from 'gulp-brotli';
 // @ts-expect-error
 import gulpGzip from 'gulp-gzip';
@@ -17,184 +19,175 @@ import gulpGzip from 'gulp-gzip';
 import gulpPostCSS from 'gulp-postcss';
 // @ts-expect-error
 import gulpTerser from 'gulp-terser';
+import { ToolingLog } from '@kbn/dev-utils';
 import terser from 'terser';
 import vfs from 'vinyl-fs';
+import globby from 'globby';
+import del from 'del';
 
-import { ToolingLog } from '@kbn/dev-utils';
-import { Task, Build, write, deleteAll } from '../lib';
+import { Task, write } from '../lib';
 
+const EUI_THEME_RE = /\.v\d\.(light|dark)\.css$/;
+const ASYNC_CHUNK_RE = /\.chunk\.\d+\.js$/;
 const asyncPipeline = promisify(pipeline);
-const asyncStat = promisify(fs.stat);
 
-const removePreMinifySourceMaps = async (log: ToolingLog, build: Build) => {
-  log.debug('Remove Pre Minify Sourcemaps');
+const getSize = (paths: string[]) => paths.reduce((acc, path) => acc + fs.statSync(path).size, 0);
 
-  await deleteAll(
-    [build.resolvePath('node_modules/@kbn/ui-shared-deps/shared_built_assets', '**', '*.map')],
-    log
-  );
+async function optimizeAssets(log: ToolingLog, assetDir: string) {
+  log.info('Creating optimized assets for', assetDir);
+  log.indent(4);
+  try {
+    log.debug('Remove Pre Minify Sourcemaps');
+    await del(['**/*.map'], { cwd: assetDir });
+
+    log.debug('Minify CSS');
+    await asyncPipeline(
+      vfs.src(['**/*.css'], { cwd: assetDir }),
+      gulpPostCSS([
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        require('cssnano')({
+          preset: ['default', { discardComments: false }],
+        }),
+      ]),
+      vfs.dest(assetDir)
+    );
+
+    log.debug('Minify JS');
+    await asyncPipeline(
+      vfs.src(['**/*.js'], { cwd: assetDir }),
+      gulpTerser({ compress: true, mangle: true }, terser.minify),
+      vfs.dest(assetDir)
+    );
+
+    log.debug('Brotli compress');
+    await asyncPipeline(
+      vfs.src(['**/*.{js,css}'], { cwd: assetDir }),
+      gulpBrotli(),
+      vfs.dest(assetDir)
+    );
+
+    log.debug('GZip compress');
+    await asyncPipeline(
+      vfs.src(['**/*.{js,css}'], { cwd: assetDir }),
+      gulpGzip(),
+      vfs.dest(assetDir)
+    );
+  } finally {
+    log.indent(-4);
+  }
+}
+
+type Category = ReturnType<typeof getCategory>;
+const getCategory = (relative: string) => {
+  if (EUI_THEME_RE.test(relative)) {
+    return 'euiTheme';
+  }
+
+  if (relative.endsWith('.css')) {
+    return 'css';
+  }
+
+  if (relative.endsWith('.ttf')) {
+    return 'font';
+  }
+
+  if (ASYNC_CHUNK_RE.test(relative)) {
+    return 'asyncChunk';
+  }
+
+  if (relative.includes('kbn-ui-shared-deps-npm')) {
+    return 'npm';
+  }
+
+  if (relative.includes('kbn-ui-shared-deps-src')) {
+    return 'src';
+  }
+
+  throw new Error(`unable to categorize file [${relative}]`);
 };
 
-const minifyKbnUiSharedDepsCSS = async (log: ToolingLog, build: Build) => {
-  const buildRoot = build.resolvePath();
-
-  log.debug('Minify CSS');
-
-  await asyncPipeline(
-    vfs.src(['node_modules/@kbn/ui-shared-deps/shared_built_assets/**/*.css'], {
-      cwd: buildRoot,
-    }),
-
-    gulpPostCSS([
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      require('cssnano')({
-        preset: [
-          'default',
-          {
-            discardComments: false,
-          },
-        ],
-      }),
-    ]),
-
-    vfs.dest('node_modules/@kbn/ui-shared-deps/shared_built_assets', { cwd: buildRoot })
-  );
-};
-
-const minifyKbnUiSharedDepsJS = async (log: ToolingLog, build: Build) => {
-  const buildRoot = build.resolvePath();
-
-  log.debug('Minify JS');
-
-  await asyncPipeline(
-    vfs.src(['node_modules/@kbn/ui-shared-deps/shared_built_assets/**/*.js'], {
-      cwd: buildRoot,
-    }),
-
-    gulpTerser(
-      {
-        compress: true,
-        mangle: true,
-      },
-      terser.minify
-    ),
-
-    vfs.dest('node_modules/@kbn/ui-shared-deps/shared_built_assets', { cwd: buildRoot })
-  );
-};
-
-const brotliCompressKbnUiSharedDeps = async (log: ToolingLog, build: Build) => {
-  const buildRoot = build.resolvePath();
-
-  log.debug('Brotli compress');
-
-  await asyncPipeline(
-    vfs.src(['node_modules/@kbn/ui-shared-deps/shared_built_assets/**/*.{js,css}'], {
-      cwd: buildRoot,
-    }),
-
-    gulpBrotli(),
-
-    vfs.dest('node_modules/@kbn/ui-shared-deps/shared_built_assets', { cwd: buildRoot })
-  );
-};
-
-const gzipCompressKbnUiSharedDeps = async (log: ToolingLog, build: Build) => {
-  const buildRoot = build.resolvePath();
-
-  log.debug('GZip compress');
-
-  await asyncPipeline(
-    vfs.src(['node_modules/@kbn/ui-shared-deps/shared_built_assets/**/*.{js,css}'], {
-      cwd: buildRoot,
-    }),
-
-    gulpGzip(),
-
-    vfs.dest('node_modules/@kbn/ui-shared-deps/shared_built_assets', { cwd: buildRoot })
-  );
-};
-
-const createKbnUiSharedDepsBundleMetrics = async (log: ToolingLog, build: Build) => {
-  const bundleMetricsFilePath = build.resolvePath(
-    'node_modules/@kbn/ui-shared-deps/shared_built_assets',
-    'metrics.json'
+function categorizeAssets(assetDirs: string[]) {
+  const assets = assetDirs.flatMap((assetDir) =>
+    globby
+      .sync(['**/*'], {
+        cwd: assetDir,
+        ignore: ['*-manifest.json', '*.gz', '*.br'],
+        absolute: true,
+      })
+      .map((path): { path: string; category: Category } => ({
+        path,
+        category: getCategory(Path.relative(assetDir, path)),
+      }))
   );
 
-  const kbnUISharedDepsJSFileSize = (
-    await asyncStat(
-      build.resolvePath(
-        'node_modules/@kbn/ui-shared-deps/shared_built_assets',
-        'kbn-ui-shared-deps.js'
-      )
-    )
-  ).size;
+  const groups = new Map<Category, string[]>();
+  const add = (cat: Category, path: string) => {
+    const group = groups.get(cat) ?? [];
+    group.push(path);
+    groups.set(cat, group);
+  };
 
-  const kbnUISharedDepsCSSFileSize =
-    (
-      await asyncStat(
-        build.resolvePath(
-          'node_modules/@kbn/ui-shared-deps/shared_built_assets',
-          'kbn-ui-shared-deps.css'
-        )
-      )
-    ).size +
-    (
-      await asyncStat(
-        build.resolvePath(
-          'node_modules/@kbn/ui-shared-deps/shared_built_assets',
-          'kbn-ui-shared-deps.v7.light.css'
-        )
-      )
-    ).size;
+  for (const { path, category } of assets) {
+    if (category === 'euiTheme') {
+      // only track v8.light theme
+      if (path.includes('v8.light')) {
+        add('css', path);
+      }
+      continue;
+    }
 
-  const kbnUISharedDepsElasticJSFileSize = (
-    await asyncStat(
-      build.resolvePath(
-        'node_modules/@kbn/ui-shared-deps/shared_built_assets',
-        'kbn-ui-shared-deps.@elastic.js'
-      )
-    )
-  ).size;
+    add(category, path);
+  }
 
-  log.debug('Create metrics.json');
-
-  const metrics = [
-    {
-      group: 'page load bundle size',
-      id: 'kbnUiSharedDeps-js',
-      value: kbnUISharedDepsJSFileSize,
-    },
-    {
-      group: 'page load bundle size',
-      id: 'kbnUiSharedDeps-css',
-      value: kbnUISharedDepsCSSFileSize,
-    },
-    {
-      group: 'page load bundle size',
-      id: 'kbnUiSharedDeps-elastic',
-      value: kbnUISharedDepsElasticJSFileSize,
-    },
-  ];
-
-  await write(bundleMetricsFilePath, JSON.stringify(metrics, null, 2));
-};
-
-const generateKbnUiSharedDepsOptimizedAssets = async (log: ToolingLog, build: Build) => {
-  log.info('Creating optimized assets for @kbn/ui-shared-deps');
-  await removePreMinifySourceMaps(log, build);
-  await minifyKbnUiSharedDepsCSS(log, build);
-  await minifyKbnUiSharedDepsJS(log, build);
-  await createKbnUiSharedDepsBundleMetrics(log, build);
-  await brotliCompressKbnUiSharedDeps(log, build);
-  await gzipCompressKbnUiSharedDeps(log, build);
-};
+  return groups;
+}
 
 export const GeneratePackagesOptimizedAssets: Task = {
   description: 'Generates Optimized Assets for Packages',
 
   async run(config, log, build) {
-    // Create optimized assets for @kbn/ui-shared-deps
-    await generateKbnUiSharedDepsOptimizedAssets(log, build);
+    const npmAssetDir = build.resolvePath(
+      `node_modules/@kbn/ui-shared-deps-npm/shared_built_assets`
+    );
+    const srcAssetDir = build.resolvePath(
+      `node_modules/@kbn/ui-shared-deps-src/shared_built_assets`
+    );
+    const assetDirs = [npmAssetDir, srcAssetDir];
+
+    // process assets in each ui-shared-deps package
+    for (const assetDir of assetDirs) {
+      await optimizeAssets(log, assetDir);
+    }
+
+    // analyze assets to produce metrics.json file
+    const groups = categorizeAssets(assetDirs);
+    log.verbose('categorized assets', groups);
+    const metrics = [
+      {
+        group: 'page load bundle size',
+        id: 'kbnUiSharedDeps-npmDll',
+        value: getSize(groups.get('npm') ?? []),
+      },
+      {
+        group: 'page load bundle size',
+        id: 'kbnUiSharedDeps-srcJs',
+        value: getSize(groups.get('src') ?? []),
+      },
+      {
+        group: 'page load bundle size',
+        id: 'kbnUiSharedDeps-css',
+        value: getSize(groups.get('css') ?? []),
+      },
+      {
+        group: 'page load bundle size',
+        id: 'kbnUiSharedDeps-fonts',
+        value: getSize(groups.get('font') ?? []),
+      },
+    ];
+    log.verbose('metrics:', metrics);
+
+    // write unified metrics to the @kbn/ui-shared-deps-src asset dir
+    log.debug('Create metrics.json');
+    await write(Path.resolve(srcAssetDir, 'metrics.json'), JSON.stringify(metrics, null, 2));
   },
 };

src/plugins/interactive_setup/public/single_chars_field.tsx

@@ -13,7 +13,7 @@ import useList from 'react-use/lib/useList';
 import useUpdateEffect from 'react-use/lib/useUpdateEffect';
 
 import { i18n } from '@kbn/i18n';
-import { euiThemeVars } from '@kbn/ui-shared-deps/theme';
+import { euiThemeVars } from '@kbn/ui-shared-deps-src/theme';
 
 export interface SingleCharsFieldProps {
   defaultValue: string;

src/plugins/kibana_react/common/eui_styled_components.tsx

@@ -10,7 +10,7 @@ import type { DecoratorFn } from '@storybook/react';
 import React from 'react';
 import * as styledComponents from 'styled-components';
 import { ThemedStyledComponentsModule, ThemeProvider, ThemeProviderProps } from 'styled-components';
-import { euiThemeVars, euiLightVars, euiDarkVars } from '@kbn/ui-shared-deps/theme';
+import { euiThemeVars, euiLightVars, euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
 
 export interface EuiTheme {
   eui: typeof euiThemeVars;

src/plugins/vis_types/vega/public/data_model/vega_parser.test.js

@@ -7,7 +7,7 @@
  */
 
 import { cloneDeep } from 'lodash';
-import { euiThemeVars } from '@kbn/ui-shared-deps/theme';
+import { euiThemeVars } from '@kbn/ui-shared-deps-src/theme';
 import { VegaParser } from './vega_parser';
 import { bypassExternalUrlCheck } from '../vega_view/vega_base_view';
 

src/plugins/vis_types/vega/public/data_model/vega_parser.ts

@@ -11,7 +11,7 @@ import schemaParser from 'vega-schema-url-parser';
 import versionCompare from 'compare-versions';
 import hjson from 'hjson';
 import { euiPaletteColorBlind } from '@elastic/eui';
-import { euiThemeVars } from '@kbn/ui-shared-deps/theme';
+import { euiThemeVars } from '@kbn/ui-shared-deps-src/theme';
 import { i18n } from '@kbn/i18n';
 
 import { logger, Warn, None, version as vegaVersion } from 'vega';

test/functional/apps/bundles/index.js

@@ -26,28 +26,28 @@ export default function ({ getService }) {
       supertest
         // We use the kbn-ui-shared-deps for these tests since they are always built with br compressed outputs,
         // even in dev. Bundles built by @kbn/optimizer are only built with br compression in dist mode.
-        .get(`/${buildNum}/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.js`)
+        .get(`/${buildNum}/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js`)
         .set('Accept-Encoding', 'gzip')
         .expect(200)
         .expect('Content-Encoding', 'gzip'));
 
     it('returns br files when client only supports br', () =>
       supertest
-        .get(`/${buildNum}/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.js`)
+        .get(`/${buildNum}/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js`)
         .set('Accept-Encoding', 'br')
         .expect(200)
         .expect('Content-Encoding', 'br'));
 
     it('returns br files when client only supports gzip and br', () =>
       supertest
-        .get(`/${buildNum}/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.js`)
+        .get(`/${buildNum}/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js`)
         .set('Accept-Encoding', 'gzip, br')
         .expect(200)
         .expect('Content-Encoding', 'br'));
 
     it('returns gzip files when client prefers gzip', () =>
       supertest
-        .get(`/${buildNum}/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.js`)
+        .get(`/${buildNum}/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js`)
         .set('Accept-Encoding', 'gzip;q=1.0, br;q=0.5')
         .expect(200)
         .expect('Content-Encoding', 'gzip'));

test/scripts/jenkins_build_kibana.sh

@@ -21,7 +21,7 @@ if [[ -z "$CODE_COVERAGE" ]] ; then
   echo " -> shipping metrics from build to ci-stats"
   node scripts/ship_ci_stats \
     --metrics target/optimizer_bundle_metrics.json \
-    --metrics build/kibana/node_modules/@kbn/ui-shared-deps/shared_built_assets/metrics.json
+    --metrics build/kibana/node_modules/@kbn/ui-shared-deps-src/shared_built_assets/metrics.json
 
   linuxBuild="$(find "$KIBANA_DIR/target" -name 'kibana-*-linux-x86_64.tar.gz')"
   installDir="$KIBANA_DIR/install/kibana"

test/scripts/jenkins_xpack_baseline.sh

@@ -10,7 +10,7 @@ node scripts/build --debug
 echo " -> shipping metrics from build to ci-stats"
 node scripts/ship_ci_stats \
   --metrics target/optimizer_bundle_metrics.json \
-  --metrics build/kibana/node_modules/@kbn/ui-shared-deps/shared_built_assets/metrics.json
+  --metrics build/kibana/node_modules/@kbn/ui-shared-deps-src/shared_built_assets/metrics.json
 
 linuxBuild="$(find "$KIBANA_DIR/target" -name 'kibana-*-linux-x86_64.tar.gz')"
 installDir="$KIBANA_DIR/install/kibana"

x-pack/plugins/canvas/shareable_runtime/api/index.ts

@@ -9,6 +9,6 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import 'whatwg-fetch';
 import 'jquery';
-import '@kbn/ui-shared-deps/flot_charts';
+import '@kbn/ui-shared-deps-src/flot_charts';
 
 export * from './shareable';

x-pack/plugins/lens/public/shared_components/coloring/utils.ts

@@ -7,7 +7,7 @@
 
 import chroma from 'chroma-js';
 import { PaletteOutput, PaletteRegistry } from 'src/plugins/charts/public';
-import { euiLightVars, euiDarkVars } from '@kbn/ui-shared-deps/theme';
+import { euiLightVars, euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
 import { isColorDark } from '@elastic/eui';
 import type { Datatable } from 'src/plugins/expressions/public';
 import {

x-pack/plugins/maps/public/reducers/map/default_map_settings.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { euiThemeVars } from '@kbn/ui-shared-deps/theme';
+import { euiThemeVars } from '@kbn/ui-shared-deps-src/theme';
 import { INITIAL_LOCATION, MAX_ZOOM, MIN_ZOOM } from '../../../common/constants';
 import { MapSettings } from './types';
 

x-pack/plugins/security/public/components/token_field.tsx

@@ -22,7 +22,7 @@ import type { FunctionComponent, ReactElement } from 'react';
 import React from 'react';
 
 import { i18n } from '@kbn/i18n';
-import { euiThemeVars } from '@kbn/ui-shared-deps/theme';
+import { euiThemeVars } from '@kbn/ui-shared-deps-src/theme';
 
 export interface TokenFieldProps extends Omit<EuiFieldTextProps, 'append'> {
   value: string;

x-pack/plugins/security/server/__snapshots__/prompt_page.test.tsx.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PromptPage renders as expected with additional scripts 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.v7.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/some/script1.js\\"></script><script src=\\"/mock-basepath/some/script2.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">Some Title</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><div>Some Body</div></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#1</span></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#2</span></div></div></div></div></div></div></body></html>"`;
+exports[`PromptPage renders as expected with additional scripts 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v7.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/some/script1.js\\"></script><script src=\\"/mock-basepath/some/script2.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">Some Title</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><div>Some Body</div></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#1</span></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#2</span></div></div></div></div></div></div></body></html>"`;
 
-exports[`PromptPage renders as expected without additional scripts 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.v7.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">Some Title</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><div>Some Body</div></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#1</span></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#2</span></div></div></div></div></div></div></body></html>"`;
+exports[`PromptPage renders as expected without additional scripts 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v7.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">Some Title</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><div>Some Body</div></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#1</span></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#2</span></div></div></div></div></div></div></body></html>"`;

x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`UnauthenticatedPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.v7.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">We couldn&#x27;t log you in</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><p>We hit an authentication error. Please check your credentials and try again. If you still can&#x27;t log in, contact your system administrator.</p></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiButton euiButton--primary euiButton--fill\\" href=\\"/some/url?some-query=some-value#some-hash\\" rel=\\"noreferrer\\" data-test-subj=\\"logInButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Log in</span></span></a></div></div></div></div></div></div></body></html>"`;
+exports[`UnauthenticatedPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v7.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">We couldn&#x27;t log you in</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><p>We hit an authentication error. Please check your credentials and try again. If you still can&#x27;t log in, contact your system administrator.</p></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiButton euiButton--primary euiButton--fill\\" href=\\"/some/url?some-query=some-value#some-hash\\" rel=\\"noreferrer\\" data-test-subj=\\"logInButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Log in</span></span></a></div></div></div></div></div></div></body></html>"`;

x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ResetSessionPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.v7.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/internal/security/reset_session_page.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">You do not have permission to access the requested page</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><p>Either go back to the previous page or log in as a different user.</p></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiButton euiButton--primary euiButton--fill\\" href=\\"/path/to/logout\\" rel=\\"noreferrer\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Log in as different user</span></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Go back</span></span></button></div></div></div></div></div></div></body></html>"`;
+exports[`ResetSessionPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v7.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/internal/security/reset_session_page.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">You do not have permission to access the requested page</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><p>Either go back to the previous page or log in as a different user.</p></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiButton euiButton--primary euiButton--fill\\" href=\\"/path/to/logout\\" rel=\\"noreferrer\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Log in as different user</span></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Go back</span></span></button></div></div></div></div></div></div></body></html>"`;

x-pack/plugins/security/server/prompt_page.tsx

@@ -18,7 +18,8 @@ import React from 'react';
 
 import { i18n } from '@kbn/i18n';
 import { I18nProvider } from '@kbn/i18n/react';
-import * as UiSharedDeps from '@kbn/ui-shared-deps';
+import UiSharedDepsNpm from '@kbn/ui-shared-deps-npm';
+import UiSharedDepsSrc from '@kbn/ui-shared-deps-src';
 import type { IBasePath } from 'src/core/server';
 
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
@@ -51,8 +52,8 @@ export function PromptPage({
   const uiPublicURL = `${basePath.serverBasePath}/ui`;
   const regularBundlePath = `${basePath.serverBasePath}/${buildNumber}/bundles`;
   const styleSheetPaths = [
-    `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.baseCssDistFilename}`,
-    `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.lightCssDistFilename}`,
+    `${regularBundlePath}/kbn-ui-shared-deps-src/${UiSharedDepsSrc.cssDistFilename}`,
+    `${regularBundlePath}/kbn-ui-shared-deps-npm/${UiSharedDepsNpm.lightCssDistFilename}`,
     `${basePath.serverBasePath}/node_modules/@kbn/ui-framework/dist/kui_light.css`,
     `${basePath.serverBasePath}/ui/legacy_light_theme.css`,
   ];

x-pack/plugins/timelines/public/components/t_grid/body/helpers.test.tsx

@@ -17,7 +17,7 @@ import {
   addBuildingBlockStyle,
 } from './helpers';
 
-import { euiThemeVars } from '@kbn/ui-shared-deps/theme';
+import { euiThemeVars } from '@kbn/ui-shared-deps-src/theme';
 import { mockDnsEvent } from '../../../mock';
 
 describe('helpers', () => {

yarn.lock

@@ -2925,7 +2925,11 @@
   version "0.0.0"
   uid ""
 
-"@kbn/ui-shared-deps@link:bazel-bin/packages/kbn-ui-shared-deps":
+"@kbn/ui-shared-deps-npm@link:bazel-bin/packages/kbn-ui-shared-deps-npm":
+  version "0.0.0"
+  uid ""
+
+"@kbn/ui-shared-deps-src@link:bazel-bin/packages/kbn-ui-shared-deps-src":
   version "0.0.0"
   uid ""