[7.x] [kbn/ui-shared-deps] expand and split (#62364) (#62522)

* [kbn/ui-shared-deps] expand and split (#62364)

* [kbn/ui-shared-deps] expand and split

* add two import styles for eui/react-dom that are new

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

* update yarn.lock file

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

package.json

@@ -235,6 +235,7 @@
     "react-monaco-editor": "~0.27.0",
     "react-redux": "^7.1.3",
     "react-resize-detector": "^4.2.0",
+    "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-sizeme": "^2.3.6",
     "react-use": "^13.27.0",

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

@@ -27,7 +27,7 @@ import TerserPlugin from 'terser-webpack-plugin';
 import webpackMerge from 'webpack-merge';
 // @ts-ignore
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
-import * as SharedDeps from '@kbn/ui-shared-deps';
+import * as UiSharedDeps from '@kbn/ui-shared-deps';
 
 import { Bundle, WorkerConfig, parseDirPath, DisallowedSyntaxPlugin } from '../common';
 
@@ -71,7 +71,7 @@ export function getWebpackConfig(bundle: Bundle, worker: WorkerConfig) {
     },
 
     externals: {
-      ...SharedDeps.externals,
+      ...UiSharedDeps.externals,
     },
 
     plugins: [new CleanWebpackPlugin(), new DisallowedSyntaxPlugin()],

packages/kbn-ui-framework/package.json

@@ -38,7 +38,7 @@
     "brace": "0.11.1",
     "chalk": "^2.4.2",
     "chokidar": "3.2.1",
-    "core-js": "^3.2.1",
+    "core-js": "^3.6.4",
     "css-loader": "^3.4.2",
     "expose-loader": "^0.7.5",
     "file-loader": "^4.2.0",

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

@@ -17,31 +17,40 @@
  * under the License.
  */
 
-// import global polyfills before everything else
 require('./polyfills');
 
 // must load before angular
 export const Jquery = require('jquery');
 window.$ = window.jQuery = Jquery;
 
-export const Angular = require('angular');
+// stateful deps
-export const ElasticCharts = require('@elastic/charts');
-export const ElasticEui = require('@elastic/eui');
-export const ElasticEuiLibServices = require('@elastic/eui/lib/services');
-export const ElasticEuiLightTheme = require('@elastic/eui/dist/eui_theme_light.json');
-export const ElasticEuiDarkTheme = require('@elastic/eui/dist/eui_theme_dark.json');
 export const KbnI18n = require('@kbn/i18n');
 export const KbnI18nAngular = require('@kbn/i18n/angular');
 export const KbnI18nReact = require('@kbn/i18n/react');
+export const Angular = require('angular');
 export const Moment = require('moment');
 export const MomentTimezone = require('moment-timezone/moment-timezone');
+export const Monaco = require('./monaco.ts');
+export const MonacoBare = require('monaco-editor/esm/vs/editor/editor.api');
 export const React = require('react');
 export const ReactDom = require('react-dom');
+export const ReactDomServer = require('react-dom/server');
 export const ReactIntl = require('react-intl');
 export const ReactRouter = require('react-router'); // eslint-disable-line
 export const ReactRouterDom = require('react-router-dom');
-export const Monaco = require('./monaco.ts');
-export const MonacoBare = require('monaco-editor/esm/vs/editor/editor.api');
 
-// load timezone data into moment-timezone
 Moment.tz.load(require('moment-timezone/data/packed/latest.json'));
+
+// big deps which are locked to a single version
+export const Rxjs = require('rxjs');
+export const RxjsOperators = require('rxjs/operators');
+export const ElasticCharts = require('@elastic/charts');
+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 ElasticEuiLightTheme = require('@elastic/eui/dist/eui_theme_light.json');
+export const ElasticEuiDarkTheme = require('@elastic/eui/dist/eui_theme_dark.json');
+export const ElasticEuiChartsTheme = require('@elastic/eui/dist/eui_charts_theme');
+
+// massive deps that we should really get rid of or reduce in size substantially
+export const ElasticsearchBrowser = require('elasticsearch-browser/elasticsearch.js');

packages/kbn-ui-shared-deps/index.d.ts

@@ -25,7 +25,12 @@ export const distDir: string;
 /**
  * Filename of the main bundle file in the distributable directory
  */
-export const distFilename: string;
+export const jsFilename: string;
+
+/**
+ * Filename of files that must be loaded before the jsFilename
+ */
+export const jsDepFilenames: string[];
 
 /**
  * Filename of the unthemed css file in the distributable directory

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

@@ -20,17 +20,14 @@
 const Path = require('path');
 
 exports.distDir = Path.resolve(__dirname, 'target');
-exports.distFilename = 'kbn-ui-shared-deps.js';
+exports.jsDepFilenames = ['kbn-ui-shared-deps.@elastic.js'];
+exports.jsFilename = 'kbn-ui-shared-deps.js';
 exports.baseCssDistFilename = 'kbn-ui-shared-deps.css';
 exports.lightCssDistFilename = 'kbn-ui-shared-deps.light.css';
 exports.darkCssDistFilename = 'kbn-ui-shared-deps.dark.css';
 exports.externals = {
+  // stateful deps
   angular: '__kbnSharedDeps__.Angular',
-  '@elastic/charts': '__kbnSharedDeps__.ElasticCharts',
-  '@elastic/eui': '__kbnSharedDeps__.ElasticEui',
-  '@elastic/eui/lib/services': '__kbnSharedDeps__.ElasticEuiLibServices',
-  '@elastic/eui/dist/eui_theme_light.json': '__kbnSharedDeps__.ElasticEuiLightTheme',
-  '@elastic/eui/dist/eui_theme_dark.json': '__kbnSharedDeps__.ElasticEuiDarkTheme',
   '@kbn/i18n': '__kbnSharedDeps__.KbnI18n',
   '@kbn/i18n/angular': '__kbnSharedDeps__.KbnI18nAngular',
   '@kbn/i18n/react': '__kbnSharedDeps__.KbnI18nReact',
@@ -39,10 +36,31 @@ exports.externals = {
   'moment-timezone': '__kbnSharedDeps__.MomentTimezone',
   react: '__kbnSharedDeps__.React',
   'react-dom': '__kbnSharedDeps__.ReactDom',
+  'react-dom/server': '__kbnSharedDeps__.ReactDomServer',
   'react-intl': '__kbnSharedDeps__.ReactIntl',
   'react-router': '__kbnSharedDeps__.ReactRouter',
   'react-router-dom': '__kbnSharedDeps__.ReactRouterDom',
   '@kbn/ui-shared-deps/monaco': '__kbnSharedDeps__.Monaco',
   // this is how plugins/consumers from npm load monaco
   'monaco-editor/esm/vs/editor/editor.api': '__kbnSharedDeps__.MonacoBare',
+
+  /**
+   * big deps which are locked to a single version
+   */
+  rxjs: '__kbnSharedDeps__.Rxjs',
+  'rxjs/operators': '__kbnSharedDeps__.RxjsOperators',
+  '@elastic/charts': '__kbnSharedDeps__.ElasticCharts',
+  '@elastic/eui': '__kbnSharedDeps__.ElasticEui',
+  '@elastic/eui/lib/services': '__kbnSharedDeps__.ElasticEuiLibServices',
+  '@elastic/eui/lib/services/format': '__kbnSharedDeps__.ElasticEuiLibServicesFormat',
+  '@elastic/eui/dist/eui_charts_theme': '__kbnSharedDeps__.ElasticEuiChartsTheme',
+  '@elastic/eui/dist/eui_theme_light.json': '__kbnSharedDeps__.ElasticEuiLightTheme',
+  '@elastic/eui/dist/eui_theme_dark.json': '__kbnSharedDeps__.ElasticEuiDarkTheme',
+
+  /**
+   * massive deps that we should really get rid of or reduce in size substantially
+   */
+  elasticsearch: '__kbnSharedDeps__.ElasticsearchBrowser',
+  'elasticsearch-browser': '__kbnSharedDeps__.ElasticsearchBrowser',
+  'elasticsearch-browser/elasticsearch': '__kbnSharedDeps__.ElasticsearchBrowser',
 };

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

@@ -1,37 +1,41 @@
 {
   "name": "@kbn/ui-shared-deps",
   "version": "1.0.0",
-  "license": "Apache-2.0",
   "private": true,
+  "license": "Apache-2.0",
   "scripts": {
     "build": "node scripts/build",
     "kbn:bootstrap": "node scripts/build --dev",
     "kbn:watch": "node scripts/build --watch"
   },
-  "devDependencies": {
+  "dependencies": {
-    "abortcontroller-polyfill": "^1.4.0",
-    "@elastic/eui": "21.0.1",
-    "@kbn/babel-preset": "1.0.0",
     "@elastic/charts": "^18.1.1",
-    "@kbn/dev-utils": "1.0.0",
+    "@elastic/eui": "21.0.1",
     "@kbn/i18n": "1.0.0",
-    "@yarnpkg/lockfile": "^1.1.0",
+    "abortcontroller-polyfill": "^1.4.0",
     "angular": "^1.7.9",
     "core-js": "^3.2.1",
-    "css-loader": "^3.4.2",
     "custom-event-polyfill": "^0.3.0",
-    "del": "^5.1.0",
+    "elasticsearch-browser": "^16.7.0",
     "jquery": "^3.4.1",
-    "mini-css-extract-plugin": "0.8.0",
     "moment": "^2.24.0",
     "moment-timezone": "^0.5.27",
+    "monaco-editor": "~0.17.0",
+    "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-intl": "^2.8.0",
-    "react": "^16.12.0",
+    "react-router": "^5.1.2",
-    "read-pkg": "^5.2.0",
+    "react-router-dom": "^5.1.2",
     "regenerator-runtime": "^0.13.3",
+    "rxjs": "^6.5.3",
     "symbol-observable": "^1.2.0",
-    "webpack": "^4.41.5",
     "whatwg-fetch": "^3.0.0"
+  },
+  "devDependencies": {
+    "@kbn/babel-preset": "1.0.0",
+    "@kbn/dev-utils": "1.0.0",
+    "css-loader": "^3.4.2",
+    "del": "^5.1.0",
+    "webpack": "^4.41.5"
   }
 }

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

@@ -23,19 +23,19 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { REPO_ROOT } = require('@kbn/dev-utils');
 const webpack = require('webpack');
 
-const SharedDeps = require('./index');
+const UiSharedDeps = require('./index');
 
 const MOMENT_SRC = require.resolve('moment/min/moment-with-locales.js');
 
 exports.getWebpackConfig = ({ dev = false } = {}) => ({
   mode: dev ? 'development' : 'production',
   entry: {
-    [SharedDeps.distFilename.replace(/\.js$/, '')]: './entry.js',
+    'kbn-ui-shared-deps': './entry.js',
-    [SharedDeps.darkCssDistFilename.replace(/\.css$/, '')]: [
+    'kbn-ui-shared-deps.dark': [
       '@elastic/eui/dist/eui_theme_dark.css',
       '@elastic/charts/dist/theme_only_dark.css',
     ],
-    [SharedDeps.lightCssDistFilename.replace(/\.css$/, '')]: [
+    'kbn-ui-shared-deps.light': [
       '@elastic/eui/dist/eui_theme_light.css',
       '@elastic/charts/dist/theme_only_light.css',
     ],
@@ -43,7 +43,7 @@ exports.getWebpackConfig = ({ dev = false } = {}) => ({
   context: __dirname,
   devtool: dev ? '#cheap-source-map' : false,
   output: {
-    path: SharedDeps.distDir,
+    path: UiSharedDeps.distDir,
     filename: '[name].js',
     sourceMapFilename: '[file].map',
     publicPath: '__REPLACE_WITH_PUBLIC_PATH__',
@@ -81,6 +81,16 @@ exports.getWebpackConfig = ({ dev = false } = {}) => ({
 
   optimization: {
     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: {

packages/kbn-ui-shared-deps/yarn.lock

@@ -0,0 +1 @@
+../../yarn.lock

src/legacy/ui/ui_render/bootstrap/template.js.hbs

@@ -76,6 +76,14 @@ if (window.__kbnStrictCsp__ && window.__kbnCspNotEnforced__) {
 
     load({
       deps: [
+        {{#each sharedJsDepFilenames}}
+          '{{../regularBundlePath}}/kbn-ui-shared-deps/{{this}}',
+        {{/each}}
+      ],
+      urls: [
+        {
+          deps: [
+            '{{regularBundlePath}}/kbn-ui-shared-deps/{{sharedJsFilename}}',
             {
               deps: [
                 '{{dllBundlePath}}/vendors_runtime.bundle.dll.js'
@@ -86,14 +94,15 @@ if (window.__kbnStrictCsp__ && window.__kbnCspNotEnforced__) {
                 {{/each}}
               ]
             },
-        '{{regularBundlePath}}/kbn-ui-shared-deps/{{sharedDepsFilename}}',
             '{{regularBundlePath}}/commons.bundle.js',
           ],
           urls: [
             '{{regularBundlePath}}/{{appId}}.bundle.js',
             {{#each styleSheetPaths}}
               '{{this}}',
-        {{/each}},
+            {{/each}}
+          ]
+        }
       ]
     });
   };

src/legacy/ui/ui_render/ui_render_mixin.js

@@ -134,7 +134,8 @@ export function uiRenderMixin(kbnServer, server, config) {
             dllBundlePath,
             dllJsChunks,
             styleSheetPaths,
-            sharedDepsFilename: UiSharedDeps.distFilename,
+            sharedJsFilename: UiSharedDeps.jsFilename,
+            sharedJsDepFilenames: UiSharedDeps.jsDepFilenames,
             darkMode,
           },
         });

tasks/config/karma.js

@@ -54,7 +54,11 @@ module.exports = function(grunt) {
     return [
       'http://localhost:5610/test_bundle/built_css.css',
 
-      `http://localhost:5610/bundles/kbn-ui-shared-deps/${UiSharedDeps.distFilename}`,
+      ...UiSharedDeps.jsDepFilenames.map(
+        chunkFilename => `http://localhost:5610/bundles/kbn-ui-shared-deps/${chunkFilename}`
+      ),
+      `http://localhost:5610/bundles/kbn-ui-shared-deps/${UiSharedDeps.jsFilename}`,
+
       'http://localhost:5610/built_assets/dlls/vendors_runtime.bundle.dll.js',
       ...DllCompiler.getRawDllConfig().chunks.map(
         chunk => `http://localhost:5610/built_assets/dlls/vendors${chunk}.bundle.dll.js`

webpackShims/elasticsearch-browser.js

@@ -1,21 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-require('angular');
-module.exports = require('elasticsearch-browser/elasticsearch.angular.js');

x-pack/package.json

@@ -316,6 +316,7 @@
     "react-portal": "^3.2.0",
     "react-redux": "^7.1.3",
     "react-reverse-portal": "^1.0.4",
+    "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-shortcuts": "^2.0.0",
     "react-sticky": "^6.0.3",

yarn.lock

@@ -24201,7 +24201,7 @@ react-router-redux@^4.0.8:
   resolved "https://registry.yarnpkg.com/react-router-redux/-/react-router-redux-4.0.8.tgz#227403596b5151e182377dab835b5d45f0f8054e"
   integrity sha1-InQDWWtRUeGCN32rg1tdRfD4BU4=
 
-react-router@5.1.2:
+react-router@5.1.2, react-router@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.1.2.tgz#6ea51d789cb36a6be1ba5f7c0d48dd9e817d3418"
   integrity sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==