diff --git a/packages/kbn-babel-preset/common_preset.js b/packages/kbn-babel-preset/common_preset.js index 3a3763693db9a..824a73f9b2611 100644 --- a/packages/kbn-babel-preset/common_preset.js +++ b/packages/kbn-babel-preset/common_preset.js @@ -6,46 +6,57 @@ * Side Public License, v 1. */ -const plugins = [ - require.resolve('babel-plugin-add-module-exports'), - - // The class properties proposal was merged with the private fields proposal - // into the "class fields" proposal. Babel doesn't support this combined - // proposal yet, which includes private field, so this transform is - // TECHNICALLY stage 2, but for all intents and purposes it's stage 3 - // - // See https://github.com/babel/proposals/issues/12 for progress - require.resolve('@babel/plugin-proposal-class-properties'), - - // Optional Chaining proposal is stage 4 (https://github.com/tc39/proposal-optional-chaining) - // Need this since we are using TypeScript 3.7+ - require.resolve('@babel/plugin-proposal-optional-chaining'), - - // Nullish coalescing proposal is stage 4 (https://github.com/tc39/proposal-nullish-coalescing) - // Need this since we are using TypeScript 3.7+ - require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'), - - // Proposal is on stage 4, and included in ECMA-262 (https://github.com/tc39/proposal-export-ns-from) - // Need this since we are using TypeScript 3.8+ - require.resolve('@babel/plugin-proposal-export-namespace-from'), - - // Proposal is on stage 4, and included in ECMA-262 (https://github.com/tc39/proposal-export-ns-from) - // Need this since we are using TypeScript 3.9+ - require.resolve('@babel/plugin-proposal-private-methods'), - - // It enables the @babel/runtime so we can decrease the bundle sizes of the produced outputs - [ - require.resolve('@babel/plugin-transform-runtime'), +module.exports = { + presets: [ + // plugins always run before presets, but in this case we need the + // @babel/preset-typescript preset to run first so we have to move + // our explicit plugin configs to a sub-preset { - version: '^7.12.5', + plugins: [ + require.resolve('babel-plugin-add-module-exports'), + + // The class properties proposal was merged with the private fields proposal + // into the "class fields" proposal. Babel doesn't support this combined + // proposal yet, which includes private field, so this transform is + // TECHNICALLY stage 2, but for all intents and purposes it's stage 3 + // + // See https://github.com/babel/proposals/issues/12 for progress + require.resolve('@babel/plugin-proposal-class-properties'), + + // Optional Chaining proposal is stage 4 (https://github.com/tc39/proposal-optional-chaining) + // Need this since we are using TypeScript 3.7+ + require.resolve('@babel/plugin-proposal-optional-chaining'), + + // Nullish coalescing proposal is stage 4 (https://github.com/tc39/proposal-nullish-coalescing) + // Need this since we are using TypeScript 3.7+ + require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'), + + // Proposal is on stage 4, and included in ECMA-262 (https://github.com/tc39/proposal-export-ns-from) + // Need this since we are using TypeScript 3.8+ + require.resolve('@babel/plugin-proposal-export-namespace-from'), + + // Proposal is on stage 4, and included in ECMA-262 (https://github.com/tc39/proposal-export-ns-from) + // Need this since we are using TypeScript 3.9+ + require.resolve('@babel/plugin-proposal-private-methods'), + + // It enables the @babel/runtime so we can decrease the bundle sizes of the produced outputs + [ + require.resolve('@babel/plugin-transform-runtime'), + { + version: '^7.12.5', + }, + ], + ], }, - ], -]; -module.exports = { - presets: [ - [require.resolve('@babel/preset-typescript'), { allowNamespaces: true }], require.resolve('@babel/preset-react'), + + [ + require.resolve('@babel/preset-typescript'), + { + allowNamespaces: true, + allowDeclareFields: true, + }, + ], ], - plugins, }; diff --git a/packages/kbn-optimizer/src/babel_runtime_helpers/find_babel_runtime_helpers_in_entry_bundles.ts b/packages/kbn-optimizer/src/babel_runtime_helpers/find_babel_runtime_helpers_in_entry_bundles.ts index beff36023343d..f00905f3f4920 100644 --- a/packages/kbn-optimizer/src/babel_runtime_helpers/find_babel_runtime_helpers_in_entry_bundles.ts +++ b/packages/kbn-optimizer/src/babel_runtime_helpers/find_babel_runtime_helpers_in_entry_bundles.ts @@ -35,14 +35,14 @@ export async function runFindBabelHelpersInEntryBundlesCli() { } for (const { userRequest } of module.reasons) { - if (userRequest.startsWith('@babel/runtime/')) { + if (userRequest.startsWith('@babel/runtime')) { imports.add(userRequest); } } } } - log.success('found', imports.size, '@babel/register imports in entry bundles'); + log.success('found', imports.size, '@babel/runtime* imports in entry bundles'); log.write( Array.from(imports, (i) => `'${i}',`) .sort() diff --git a/packages/kbn-optimizer/src/worker/emit_stats_plugin.ts b/packages/kbn-optimizer/src/worker/emit_stats_plugin.ts index c964219e1fed6..5cb60344037fc 100644 --- a/packages/kbn-optimizer/src/worker/emit_stats_plugin.ts +++ b/packages/kbn-optimizer/src/worker/emit_stats_plugin.ts @@ -26,7 +26,7 @@ export class EmitStatsPlugin { (stats) => { Fs.writeFileSync( Path.resolve(this.bundle.outputDir, 'stats.json'), - JSON.stringify(stats.toJson()) + JSON.stringify(stats.toJson(), null, 2) ); } ); diff --git a/packages/kbn-storybook/src/webpack.config.ts b/packages/kbn-storybook/src/webpack.config.ts index 27e887eda65ce..53f9c82b86815 100644 --- a/packages/kbn-storybook/src/webpack.config.ts +++ b/packages/kbn-storybook/src/webpack.config.ts @@ -9,11 +9,13 @@ import { externals } from '@kbn/ui-shared-deps-src'; import { stringifyRequest } from 'loader-utils'; import { resolve } from 'path'; -import { Configuration, Stats } from 'webpack'; +import webpack, { Configuration, Stats } from 'webpack'; import webpackMerge from 'webpack-merge'; import { REPO_ROOT } from './lib/constants'; import { IgnoreNotFoundExportPlugin } from './ignore_not_found_export_plugin'; +type Preset = string | [string, Record] | Record; + const stats = { ...Stats.presetToOptions('minimal'), colors: true, @@ -22,6 +24,46 @@ const stats = { moduleTrace: true, }; +function isProgressPlugin(plugin: any) { + return 'handler' in plugin && plugin.showActiveModules && plugin.showModules; +} + +function isHtmlPlugin(plugin: any): plugin is { options: { template: string } } { + return !!(typeof plugin.options?.template === 'string'); +} + +function isBabelLoaderRule(rule: webpack.RuleSetRule): rule is webpack.RuleSetRule & { + use: webpack.RuleSetLoader[]; +} { + return !!( + rule.use && + Array.isArray(rule.use) && + rule.use.some( + (l) => + typeof l === 'object' && typeof l.loader === 'string' && l.loader.includes('babel-loader') + ) + ); +} + +function getPresetPath(preset: Preset) { + if (typeof preset === 'string') return preset; + if (Array.isArray(preset)) return preset[0]; + return undefined; +} + +function getTsPreset(preset: Preset) { + if (getPresetPath(preset)?.includes('preset-typescript')) { + if (typeof preset === 'string') return [preset, {}]; + if (Array.isArray(preset)) return preset; + + throw new Error('unsupported preset-typescript format'); + } +} + +function isDesiredPreset(preset: Preset) { + return !getPresetPath(preset)?.includes('preset-flow'); +} + // Extend the Storybook Webpack config with some customizations /* eslint-disable import/no-default-export */ export default function ({ config: storybookConfig }: { config: Configuration }) { @@ -83,21 +125,72 @@ export default function ({ config: storybookConfig }: { config: Configuration }) stats, }; - // Disable the progress plugin - const progressPlugin: any = (storybookConfig.plugins || []).find((plugin: any) => { - return 'handler' in plugin && plugin.showActiveModules && plugin.showModules; - }); - progressPlugin.handler = () => {}; - - // This is the hacky part. We find something that looks like the - // HtmlWebpackPlugin and mutate its `options.template` to point at our - // revised template. - const htmlWebpackPlugin: any = (storybookConfig.plugins || []).find((plugin: any) => { - return plugin.options && typeof plugin.options.template === 'string'; - }); - if (htmlWebpackPlugin) { - htmlWebpackPlugin.options.template = require.resolve('../templates/index.ejs'); + const updatedModuleRules = []; + // clone and modify the module.rules config provided by storybook so that the default babel plugins run after the typescript preset + for (const originalRule of storybookConfig.module?.rules ?? []) { + const rule = { ...originalRule }; + updatedModuleRules.push(rule); + + if (isBabelLoaderRule(rule)) { + rule.use = [...rule.use]; + const loader = (rule.use[0] = { ...rule.use[0] }); + const options = (loader.options = { ...(loader.options as Record) }); + + // capture the plugins defined at the root level + const plugins: string[] = options.plugins; + options.plugins = []; + + // move the plugins to the top of the preset array so they will run after the typescript preset + options.presets = [ + { + plugins, + }, + ...(options.presets as Preset[]).filter(isDesiredPreset).map((preset) => { + const tsPreset = getTsPreset(preset); + if (!tsPreset) { + return preset; + } + + return [ + tsPreset[0], + { + ...tsPreset[1], + allowNamespaces: true, + allowDeclareFields: true, + }, + ]; + }), + ]; + } } - return webpackMerge(storybookConfig, config); + // copy and modify the webpack plugins added by storybook + const filteredStorybookPlugins = []; + for (const plugin of storybookConfig.plugins ?? []) { + // Remove the progress plugin + if (isProgressPlugin(plugin)) { + continue; + } + + // This is the hacky part. We find something that looks like the + // HtmlWebpackPlugin and mutate its `options.template` to point at our + // revised template. + if (isHtmlPlugin(plugin)) { + plugin.options.template = require.resolve('../templates/index.ejs'); + } + + filteredStorybookPlugins.push(plugin); + } + + return webpackMerge( + { + ...storybookConfig, + plugins: filteredStorybookPlugins, + module: { + ...storybookConfig.module, + rules: updatedModuleRules, + }, + }, + config + ); } diff --git a/src/plugins/console/public/services/history.ts b/src/plugins/console/public/services/history.ts index ee1e97ceb386e..972e5283274de 100644 --- a/src/plugins/console/public/services/history.ts +++ b/src/plugins/console/public/services/history.ts @@ -14,9 +14,11 @@ const MAX_NUMBER_OF_HISTORY_ITEMS = 100; export const isQuotaExceededError = (e: Error): boolean => e.name === 'QuotaExceededError'; export class History { - constructor(private readonly storage: Storage) {} + private changeEmitter: BehaviorSubject; - private changeEmitter = new BehaviorSubject(this.getHistory() || []); + constructor(private readonly storage: Storage) { + this.changeEmitter = new BehaviorSubject(this.getHistory() || []); + } getHistoryKeys() { return this.storage diff --git a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx b/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx index 611a426dd4d71..1e19e495585fe 100644 --- a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx +++ b/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx @@ -32,7 +32,7 @@ interface State { export class DashboardViewport extends React.Component { static contextType = context; - public readonly context!: DashboardReactContextValue; + public declare readonly context: DashboardReactContextValue; private controlsRoot: React.RefObject; diff --git a/x-pack/plugins/security/public/management/roles/roles_management_app.test.tsx b/x-pack/plugins/security/public/management/roles/roles_management_app.test.tsx index faab47a858d67..f24d8bb856bf0 100644 --- a/x-pack/plugins/security/public/management/roles/roles_management_app.test.tsx +++ b/x-pack/plugins/security/public/management/roles/roles_management_app.test.tsx @@ -103,7 +103,7 @@ describe('rolesManagementApp', () => { expect(docTitle.reset).not.toHaveBeenCalled(); expect(container).toMatchInlineSnapshot(`
- Role Edit Page: {"action":"edit","rolesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"userAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"indicesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}},"fieldCache":{}},"privilegesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}},"notifications":{"toasts":{}},"fatalErrors":{},"license":{"features$":{"_isScalar":false}},"docLinks":{},"uiCapabilities":{"catalogue":{},"management":{},"navLinks":{}},"history":{"action":"PUSH","length":1,"location":{"pathname":"/edit","search":"","hash":""}}} + Role Edit Page: {"action":"edit","rolesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"userAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"indicesAPIClient":{"fieldCache":{},"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"privilegesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}},"notifications":{"toasts":{}},"fatalErrors":{},"license":{"features$":{"_isScalar":false}},"docLinks":{},"uiCapabilities":{"catalogue":{},"management":{},"navLinks":{}},"history":{"action":"PUSH","length":1,"location":{"pathname":"/edit","search":"","hash":""}}}
`); @@ -128,7 +128,7 @@ describe('rolesManagementApp', () => { expect(docTitle.reset).not.toHaveBeenCalled(); expect(container).toMatchInlineSnapshot(`
- Role Edit Page: {"action":"edit","roleName":"role@name","rolesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"userAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"indicesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}},"fieldCache":{}},"privilegesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}},"notifications":{"toasts":{}},"fatalErrors":{},"license":{"features$":{"_isScalar":false}},"docLinks":{},"uiCapabilities":{"catalogue":{},"management":{},"navLinks":{}},"history":{"action":"PUSH","length":1,"location":{"pathname":"/edit/role@name","search":"","hash":""}}} + Role Edit Page: {"action":"edit","roleName":"role@name","rolesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"userAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"indicesAPIClient":{"fieldCache":{},"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"privilegesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}},"notifications":{"toasts":{}},"fatalErrors":{},"license":{"features$":{"_isScalar":false}},"docLinks":{},"uiCapabilities":{"catalogue":{},"management":{},"navLinks":{}},"history":{"action":"PUSH","length":1,"location":{"pathname":"/edit/role@name","search":"","hash":""}}}
`); @@ -153,7 +153,7 @@ describe('rolesManagementApp', () => { expect(docTitle.reset).not.toHaveBeenCalled(); expect(container).toMatchInlineSnapshot(`
- Role Edit Page: {"action":"clone","roleName":"someRoleName","rolesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"userAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"indicesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}},"fieldCache":{}},"privilegesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}},"notifications":{"toasts":{}},"fatalErrors":{},"license":{"features$":{"_isScalar":false}},"docLinks":{},"uiCapabilities":{"catalogue":{},"management":{},"navLinks":{}},"history":{"action":"PUSH","length":1,"location":{"pathname":"/clone/someRoleName","search":"","hash":""}}} + Role Edit Page: {"action":"clone","roleName":"someRoleName","rolesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"userAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"indicesAPIClient":{"fieldCache":{},"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"privilegesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}},"notifications":{"toasts":{}},"fatalErrors":{},"license":{"features$":{"_isScalar":false}},"docLinks":{},"uiCapabilities":{"catalogue":{},"management":{},"navLinks":{}},"history":{"action":"PUSH","length":1,"location":{"pathname":"/clone/someRoleName","search":"","hash":""}}}
`);