kibana/packages/kbn-plugin-helpers
Tiago Costa 9621d8dd51
[8.16] chore(NA): upgrade to webpack 5 (#191106) (#211152)
# Backport

This will backport the following commits from `main` to `8.16`:
- [chore(NA): upgrade to webpack 5
(#191106)](https://github.com/elastic/kibana/pull/191106)

<!--- Backport version: 9.6.4 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Tiago
Costa","email":"tiago.costa@elastic.co"},"sourceCommit":{"committedDate":"2025-02-14T03:01:36Z","message":"chore(NA):
upgrade to webpack 5 (#191106)\n\n### Summary\r\n\r\n- Closes
#89741\r\n\r\nThis PR contains the resulting work of a massive effort
that ports our\r\non top bundler abstraction (called @kbn/optimizer)
from Webpack v4 into\r\nWebpack v5. It's essential in terms of long term
maintenance since v4\r\nwas not receiving updates any longer but will
also unblock some new\r\nfeatures that could be beneficial for our
future DevEx endeavours.\r\n\r\nNext you can find a small list of all
the accomplished tasks on this\r\njourney.\r\n\r\n### Completed
Tasks\r\n- [x] Upgrade dependencies to match the ones on webpack v5\r\n-
[x] Fix null-loader usages\r\n- [x] Fix raw-loader usages\r\n- [x] Fix
file-loader usages\r\n- [x] Fix url-loader usages\r\n- [x] Fix
`@kbn/optimizer-webpack-helpers` to support webpack v5 \r\n- [x] Adopt
previous webpack v4 polyfill-all strategy
with\r\nnode-polyfill-webpack-plugin\r\n- [x] Fix theme-loader on
@kbn/optimizer\r\n- [x] Migrate configurations and ad-hoc loader options
on all webpack\r\nconfigs from v4 to v5\r\n- [x] Fix @kbn/test jest
resolver for file-loader cases\r\n- [x] Migrate public-path loader on
UiSharedDeps\r\n- [x] Fix all usages of webpack-merge\r\n- [x] Migrate
BundleRemoteModule\r\n- [x] Migrate BundleRemotesPlugin\r\n- [x]
Correctly migrate PopulateBundleCachePlugin\r\n- [x] Correctly migrate
BundleMetricsPlugin\r\n- [x] Check if the profiling plugins still work
(--profile flag)\r\n- [x] Recover if possible the previous webpack v4
cacheGroup chunks\r\nrename to something like
`data.plugin.chunk.0.js`\r\n- [x] Run `/ci` and make sure we get our
first green CI, otherwise work\r\non the errors until we do\r\n- [x]
Profile and solve bottlenecks until we get a cold build\r\nperformance
similar to the one we had on webpack v4
(`node\r\nscripts/build_kibana_platform_plugins --no-cache`).\r\n- [x]
OpenSSL Legacy Warnings: try to remove `--openssl-legacy-provider\r\n`
flags\r\n- [x] Add Webpack to Renovate config\r\n- [x] Explore removing
`NodePolyfillPlugin`\r\n([here](https://www.npmjs.com/package/node-polyfill-webpack-plugin))
and\r\nadd each polyfill needed individually per each webpack config to
check\r\nif we get smaller bundles. If we do it's better to go with the
case by\r\ncase need approach instead of deploying a bunch of polyfills
with\r\nNodePolyfillPlugin. As another alternative, create a custom
smaller\r\nplugin with only the union of all needed polyfills.\r\n- [x]
Evaluate if we want to touch the resolutions on mainFields
and\r\nconditionNames\r\n- [x] Understand why `@import
'src/core/public/mixins'` does not work\r\nanymore (not a problem, we
should use relative paths anyway but we want\r\nto track why it changed
from v4 to v5)\r\n- [x] BUG: Child compilers are having errors hidden
and/or changed from\r\nerror to warning\r\n- [x] Fix license check
for\r\n[Artistic-2.0](https://spdx.org/licenses/Artistic-2.0.html) is
the\r\nlicense
for\r\n[domain-browser](https://github.com/bevry/domain-browser?tab=License-1-ov-file).\r\nThis
package is a dependency
of\r\n[NodePolyfillPlugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin).\r\nArtistic
2.0 license is [classified
as\r\nyellow](https://github.com/elastic/open-source/blob/main/elastic-product-policy.md#yellow-list)\r\nand
should only be used for dev dependencies.\r\n- [x] Make sure
`resourceQuery: { not: /raw/ }` is not necessary on\r\nother webpack
configs like storybook one\r\n- [x] Find what is being wrongly removed
by usedExports optimization;\r\nhint: I believe it is identifying a lot
of exports inside the sync entry\r\nof plugins as unused exports and
removing them. Then `__kbnBootstrap__`\r\ncan't be found\r\n- [x]
Rebalance @kbn/optimizer pickMaxWorkerCount\r\n- [x] Re-open the issue
to fix
sass-warnings\r\n[#190345](https://github.com/elastic/kibana/issues/190345)
or downgrade\r\nsass-loader to v10\r\n- [x] Remove previous esm no parse
rules\r\n- [x] Confirm esm support is working\r\n- [x] Confirm console
override is needed\r\n- [x] Confirm react prod builds on ui shared deps
for distributable\r\n- [x] Remove customization
for\r\n[xyflow](https://github.com/xyflow/xyflow) from webpack
configs\r\n- [x] Clean all the code\r\n- [x] Make sure collected metrics
from stats are still aligned with what\r\nwe were collecting before;
also verify if the modules used for optimizer\r\ncaches etc are well
generated (@kbn/node-libs-browser)\r\n- [x] Fix watch
performance\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Brad White
<brad.white@elastic.co>","sha":"203bc284781cc830049b3f7948c8fcafa8b7d9a1","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["chore","Team:Operations","release_note:skip","Team:Fleet","v9.0.0","backport:all-open","ci:build-webpack-bundle-analyzer","Team:obs-ux-infra_services","v9.1.0"],"title":"chore(NA):
upgrade to webpack
5","number":191106,"url":"https://github.com/elastic/kibana/pull/191106","mergeCommit":{"message":"chore(NA):
upgrade to webpack 5 (#191106)\n\n### Summary\r\n\r\n- Closes
#89741\r\n\r\nThis PR contains the resulting work of a massive effort
that ports our\r\non top bundler abstraction (called @kbn/optimizer)
from Webpack v4 into\r\nWebpack v5. It's essential in terms of long term
maintenance since v4\r\nwas not receiving updates any longer but will
also unblock some new\r\nfeatures that could be beneficial for our
future DevEx endeavours.\r\n\r\nNext you can find a small list of all
the accomplished tasks on this\r\njourney.\r\n\r\n### Completed
Tasks\r\n- [x] Upgrade dependencies to match the ones on webpack v5\r\n-
[x] Fix null-loader usages\r\n- [x] Fix raw-loader usages\r\n- [x] Fix
file-loader usages\r\n- [x] Fix url-loader usages\r\n- [x] Fix
`@kbn/optimizer-webpack-helpers` to support webpack v5 \r\n- [x] Adopt
previous webpack v4 polyfill-all strategy
with\r\nnode-polyfill-webpack-plugin\r\n- [x] Fix theme-loader on
@kbn/optimizer\r\n- [x] Migrate configurations and ad-hoc loader options
on all webpack\r\nconfigs from v4 to v5\r\n- [x] Fix @kbn/test jest
resolver for file-loader cases\r\n- [x] Migrate public-path loader on
UiSharedDeps\r\n- [x] Fix all usages of webpack-merge\r\n- [x] Migrate
BundleRemoteModule\r\n- [x] Migrate BundleRemotesPlugin\r\n- [x]
Correctly migrate PopulateBundleCachePlugin\r\n- [x] Correctly migrate
BundleMetricsPlugin\r\n- [x] Check if the profiling plugins still work
(--profile flag)\r\n- [x] Recover if possible the previous webpack v4
cacheGroup chunks\r\nrename to something like
`data.plugin.chunk.0.js`\r\n- [x] Run `/ci` and make sure we get our
first green CI, otherwise work\r\non the errors until we do\r\n- [x]
Profile and solve bottlenecks until we get a cold build\r\nperformance
similar to the one we had on webpack v4
(`node\r\nscripts/build_kibana_platform_plugins --no-cache`).\r\n- [x]
OpenSSL Legacy Warnings: try to remove `--openssl-legacy-provider\r\n`
flags\r\n- [x] Add Webpack to Renovate config\r\n- [x] Explore removing
`NodePolyfillPlugin`\r\n([here](https://www.npmjs.com/package/node-polyfill-webpack-plugin))
and\r\nadd each polyfill needed individually per each webpack config to
check\r\nif we get smaller bundles. If we do it's better to go with the
case by\r\ncase need approach instead of deploying a bunch of polyfills
with\r\nNodePolyfillPlugin. As another alternative, create a custom
smaller\r\nplugin with only the union of all needed polyfills.\r\n- [x]
Evaluate if we want to touch the resolutions on mainFields
and\r\nconditionNames\r\n- [x] Understand why `@import
'src/core/public/mixins'` does not work\r\nanymore (not a problem, we
should use relative paths anyway but we want\r\nto track why it changed
from v4 to v5)\r\n- [x] BUG: Child compilers are having errors hidden
and/or changed from\r\nerror to warning\r\n- [x] Fix license check
for\r\n[Artistic-2.0](https://spdx.org/licenses/Artistic-2.0.html) is
the\r\nlicense
for\r\n[domain-browser](https://github.com/bevry/domain-browser?tab=License-1-ov-file).\r\nThis
package is a dependency
of\r\n[NodePolyfillPlugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin).\r\nArtistic
2.0 license is [classified
as\r\nyellow](https://github.com/elastic/open-source/blob/main/elastic-product-policy.md#yellow-list)\r\nand
should only be used for dev dependencies.\r\n- [x] Make sure
`resourceQuery: { not: /raw/ }` is not necessary on\r\nother webpack
configs like storybook one\r\n- [x] Find what is being wrongly removed
by usedExports optimization;\r\nhint: I believe it is identifying a lot
of exports inside the sync entry\r\nof plugins as unused exports and
removing them. Then `__kbnBootstrap__`\r\ncan't be found\r\n- [x]
Rebalance @kbn/optimizer pickMaxWorkerCount\r\n- [x] Re-open the issue
to fix
sass-warnings\r\n[#190345](https://github.com/elastic/kibana/issues/190345)
or downgrade\r\nsass-loader to v10\r\n- [x] Remove previous esm no parse
rules\r\n- [x] Confirm esm support is working\r\n- [x] Confirm console
override is needed\r\n- [x] Confirm react prod builds on ui shared deps
for distributable\r\n- [x] Remove customization
for\r\n[xyflow](https://github.com/xyflow/xyflow) from webpack
configs\r\n- [x] Clean all the code\r\n- [x] Make sure collected metrics
from stats are still aligned with what\r\nwe were collecting before;
also verify if the modules used for optimizer\r\ncaches etc are well
generated (@kbn/node-libs-browser)\r\n- [x] Fix watch
performance\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Brad White
<brad.white@elastic.co>","sha":"203bc284781cc830049b3f7948c8fcafa8b7d9a1"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/211145","number":211145,"state":"OPEN"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/191106","number":191106,"mergeCommit":{"message":"chore(NA):
upgrade to webpack 5 (#191106)\n\n### Summary\r\n\r\n- Closes
#89741\r\n\r\nThis PR contains the resulting work of a massive effort
that ports our\r\non top bundler abstraction (called @kbn/optimizer)
from Webpack v4 into\r\nWebpack v5. It's essential in terms of long term
maintenance since v4\r\nwas not receiving updates any longer but will
also unblock some new\r\nfeatures that could be beneficial for our
future DevEx endeavours.\r\n\r\nNext you can find a small list of all
the accomplished tasks on this\r\njourney.\r\n\r\n### Completed
Tasks\r\n- [x] Upgrade dependencies to match the ones on webpack v5\r\n-
[x] Fix null-loader usages\r\n- [x] Fix raw-loader usages\r\n- [x] Fix
file-loader usages\r\n- [x] Fix url-loader usages\r\n- [x] Fix
`@kbn/optimizer-webpack-helpers` to support webpack v5 \r\n- [x] Adopt
previous webpack v4 polyfill-all strategy
with\r\nnode-polyfill-webpack-plugin\r\n- [x] Fix theme-loader on
@kbn/optimizer\r\n- [x] Migrate configurations and ad-hoc loader options
on all webpack\r\nconfigs from v4 to v5\r\n- [x] Fix @kbn/test jest
resolver for file-loader cases\r\n- [x] Migrate public-path loader on
UiSharedDeps\r\n- [x] Fix all usages of webpack-merge\r\n- [x] Migrate
BundleRemoteModule\r\n- [x] Migrate BundleRemotesPlugin\r\n- [x]
Correctly migrate PopulateBundleCachePlugin\r\n- [x] Correctly migrate
BundleMetricsPlugin\r\n- [x] Check if the profiling plugins still work
(--profile flag)\r\n- [x] Recover if possible the previous webpack v4
cacheGroup chunks\r\nrename to something like
`data.plugin.chunk.0.js`\r\n- [x] Run `/ci` and make sure we get our
first green CI, otherwise work\r\non the errors until we do\r\n- [x]
Profile and solve bottlenecks until we get a cold build\r\nperformance
similar to the one we had on webpack v4
(`node\r\nscripts/build_kibana_platform_plugins --no-cache`).\r\n- [x]
OpenSSL Legacy Warnings: try to remove `--openssl-legacy-provider\r\n`
flags\r\n- [x] Add Webpack to Renovate config\r\n- [x] Explore removing
`NodePolyfillPlugin`\r\n([here](https://www.npmjs.com/package/node-polyfill-webpack-plugin))
and\r\nadd each polyfill needed individually per each webpack config to
check\r\nif we get smaller bundles. If we do it's better to go with the
case by\r\ncase need approach instead of deploying a bunch of polyfills
with\r\nNodePolyfillPlugin. As another alternative, create a custom
smaller\r\nplugin with only the union of all needed polyfills.\r\n- [x]
Evaluate if we want to touch the resolutions on mainFields
and\r\nconditionNames\r\n- [x] Understand why `@import
'src/core/public/mixins'` does not work\r\nanymore (not a problem, we
should use relative paths anyway but we want\r\nto track why it changed
from v4 to v5)\r\n- [x] BUG: Child compilers are having errors hidden
and/or changed from\r\nerror to warning\r\n- [x] Fix license check
for\r\n[Artistic-2.0](https://spdx.org/licenses/Artistic-2.0.html) is
the\r\nlicense
for\r\n[domain-browser](https://github.com/bevry/domain-browser?tab=License-1-ov-file).\r\nThis
package is a dependency
of\r\n[NodePolyfillPlugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin).\r\nArtistic
2.0 license is [classified
as\r\nyellow](https://github.com/elastic/open-source/blob/main/elastic-product-policy.md#yellow-list)\r\nand
should only be used for dev dependencies.\r\n- [x] Make sure
`resourceQuery: { not: /raw/ }` is not necessary on\r\nother webpack
configs like storybook one\r\n- [x] Find what is being wrongly removed
by usedExports optimization;\r\nhint: I believe it is identifying a lot
of exports inside the sync entry\r\nof plugins as unused exports and
removing them. Then `__kbnBootstrap__`\r\ncan't be found\r\n- [x]
Rebalance @kbn/optimizer pickMaxWorkerCount\r\n- [x] Re-open the issue
to fix
sass-warnings\r\n[#190345](https://github.com/elastic/kibana/issues/190345)
or downgrade\r\nsass-loader to v10\r\n- [x] Remove previous esm no parse
rules\r\n- [x] Confirm esm support is working\r\n- [x] Confirm console
override is needed\r\n- [x] Confirm react prod builds on ui shared deps
for distributable\r\n- [x] Remove customization
for\r\n[xyflow](https://github.com/xyflow/xyflow) from webpack
configs\r\n- [x] Clean all the code\r\n- [x] Make sure collected metrics
from stats are still aligned with what\r\nwe were collecting before;
also verify if the modules used for optimizer\r\ncaches etc are well
generated (@kbn/node-libs-browser)\r\n- [x] Fix watch
performance\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Brad White
<brad.white@elastic.co>","sha":"203bc284781cc830049b3f7948c8fcafa8b7d9a1"}},{"url":"https://github.com/elastic/kibana/pull/211146","number":211146,"branch":"8.x","state":"OPEN"},{"url":"https://github.com/elastic/kibana/pull/211147","number":211147,"branch":"8.18","state":"OPEN"},{"url":"https://github.com/elastic/kibana/pull/211148","number":211148,"branch":"8.17","state":"OPEN"}]}]
BACKPORT-->

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2025-02-19 04:15:36 +00:00
..
src [8.16] chore(NA): upgrade to webpack 5 (#191106) (#211152) 2025-02-19 04:15:36 +00:00
index.ts Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
jest.integration.config.js Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
kibana.jsonc [Move @kbn/config-schema to server] @kbn/optimizer (#189769) 2024-08-02 13:04:23 -05:00
package.json Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
README.md fix(NA): external plugins development flow with the new modern package plugins in place (#153562) 2023-04-06 18:00:24 +01:00
tsconfig.json fix(NA): build external plugins with correct bazel artifacts output mode (#159630) 2023-06-15 00:43:05 +01:00

@kbn/plugin-helpers

Just some helpers for kibana plugin devs.

Installation

You don't actually need to install the plugin helpers, they are automatically inherited from the Kibana project by building your plugin within the Kibana repo. To use the plugin helpers just create the needed npm scripts on your plugin's package.json (as exemplified below) which is already the case if you use the new node scripts/generate_plugin script.

{
  "scripts" : {
    "build": "yarn plugin-helpers build",
    "dev": "yarn plugin-helpers dev",
    "plugin-helpers": "node ../../scripts/plugin_helpers",
    "kbn": "node ../../scripts/kbn"
  }
}

This will make it easier to execute the plugin-helpers script from within your plugin repository.

yarn kbn bootstrap

Usage

This simple CLI has a build task that plugin devs can run from to easily package Kibana plugins.

Previously you could also use that tool to start and test your plugin. Currently you can run your plugin along with Kibana running yarn start in the Kibana repository root folder. Finally to test your plugin you should now configure and use your own tools.

$ plugin-helpers help

  Usage: plugin-helpers [command] [options]

  Commands:
      build
        Copies files from the source into a zip archive that can be distributed for
        installation into production Kibana installs. The archive includes the non-
        development npm dependencies and builds itself using raw files in the source
        directory so make sure they are clean/up to date. The resulting archive can
        be found at:
  
          build/{plugin.id}-{kibanaVersion}.zip
  
        Options:
          --skip-archive        Don't create the zip file, just create the build/kibana directory
          --kibana-version, -v  Kibana version this plugin will be built for
          
      dev
        Builds the current plugin ui browser side so it can be picked up by Kibana
        during development.
        
        Options:
          --dist, -d  Outputs bundles in dist mode instead
          --watch, -w  Starts the watch mode
    

  Global options:
      --verbose, -v      Log verbosely
      --debug            Log debug messages (less than verbose)
      --quiet            Only log errors
      --silent           Don't log anything
      --help             Show this message

Versions

The plugins helpers in the Kibana repo are available for Kibana 6.3 and greater. Just checkout the branch of Kibana you want to build against and the plugin helpers should be up to date for that version of Kibana.

When you're targeting versions before Kibana 6.3, use the @elastic/plugin-helpers from npm. See the versions section of the @elastic/plugin-helpers readme for information about version compatibility.

Configuration

plugin-helpers accepts a number of settings, which can be specified at runtime, or included in a .kibana-plugin-helpers.json file if you'd like to bundle those settings with your project.

It will also observe a .kibana-plugin-helpers.dev.json, much like Kibana does, which we encourage you to add to your .gitignore file and use for local settings that you don't intend to share. These "dev" settings will override any settings in the normal json config.

All configuration setting listed below can simply can be included in the json config files. If you intend to inline the command, you will need to convert the setting to snake case (ie. skipArchive becomes --skip-archive).

Global settings

Settings for build

Setting Description
serverSourcePatterns Defines the files that are built with babel and written to your distributable for your server plugin. It is ignored if kibana.json has none server: true setting defined.
skipArchive Don't create the zip file, leave the build path alone
skipInstallDependencies Don't install dependencies defined in package.json into build output
kibanaVersion Kibana version for the build output (added to package.json)

TypeScript support

Plugin code can be written in TypeScript if desired. To enable TypeScript support create a tsconfig.json file at the root of your plugin that looks something like this:

{
  // extend Kibana's tsconfig, or use your own settings
  "extends": "../../tsconfig.json",

  // tell the TypeScript compiler where to find your source files
  "include": [
    "server/**/*",
    "public/**/*"
  ]
}