[kbn/ui-shared-deps] split into two packages (elastic#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>

Author: Spencer

.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/__snapshots__/basic_optimization.test.ts.snap

@@ -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/integration_tests/basic_optimization.test.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/populate_bundle_cache_plugin.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.config.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-optimizer/src/worker/webpack_helpers.ts

@@ -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/BUILD.bazel

@@ -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/register_theme_switcher_addon.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/lib/run_storybook_cli.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/src/webpack.config.ts

@@ -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-storybook/templates/index.ejs

@@ -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/BUILD.bazel packages/kbn-ui-shared-deps-npm/BUILD.bazel

@@ -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.