maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source 
* [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>
This commit is contained in:
Spencer 2020-04-03 14:11:36 -07:00 committed by GitHub
parent ebd22842c0
commit e6c23ea9b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 115 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -238,6 +238,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",

4
packages/kbn-optimizer/src/worker/webpack.config.ts
View file

@ -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';
@ -73,7 +73,7 @@ export function getWebpackConfig(bundle: Bundle, worker: WorkerConfig) {
},
externals: {
...SharedDeps.externals,
...UiSharedDeps.externals,
},
plugins: [new CleanWebpackPlugin(), new DisallowedSyntaxPlugin()],

2
packages/kbn-ui-framework/package.json
View file

@ -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",

29
packages/kbn-ui-shared-deps/entry.js
View file

@ -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');
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');
// stateful deps
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');

7
packages/kbn-ui-shared-deps/index.d.ts vendored
View file

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

30
packages/kbn-ui-shared-deps/index.js
View file

@ -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',
};

28
packages/kbn-ui-shared-deps/package.json
View file

@ -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": {
"@elastic/charts": "^18.1.1",
"abortcontroller-polyfill": "^1.4.0",
"@elastic/eui": "21.0.1",
"@kbn/babel-preset": "1.0.0",
"@kbn/dev-utils": "1.0.0",
"@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",
"core-js": "^3.6.4",
"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",
"read-pkg": "^5.2.0",
"react-router": "^5.1.2",
"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"
}
}

20
packages/kbn-ui-shared-deps/webpack.config.js
View file

@ -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',
[SharedDeps.darkCssDistFilename.replace(/\.css$/, '')]: [
'kbn-ui-shared-deps': './entry.js',
'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: {

1
packages/kbn-ui-shared-deps/yarn.lock Symbolic link
View file

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

31
src/legacy/ui/ui_render/bootstrap/template.js.hbs
View file

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

3
src/legacy/ui/ui_render/ui_render_mixin.js
View file

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

6
tasks/config/karma.js
View file

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

21
webpackShims/elasticsearch-browser.js
View file

@ -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');

1
x-pack/package.json
View file

@ -315,6 +315,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",

4
yarn.lock
View file

@ -9651,7 +9651,7 @@ core-js@^2.2.0, core-js@^2.4.0, core-js@^2.5.0, core-js@^2.5.1, core-js@^2.5.3,
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.9.tgz#6b4b214620c834152e179323727fc19741b084f2"
integrity sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==
core-js@^3.0.1, core-js@^3.0.4, core-js@^3.2.1, core-js@^3.4.1, core-js@^3.6.4:
core-js@^3.0.1, core-js@^3.0.4, core-js@^3.4.1, core-js@^3.6.4:
version "3.6.4"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.4.tgz#440a83536b458114b9cb2ac1580ba377dc470647"
integrity sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==
@ -24284,7 +24284,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==